/* packages/ui/src/styles.css */
/* Port of mocks/porcelain style.css, refinements.css and funds.css (inbox_options.css only styled the comparison page; nothing from it is needed) for the Dote.gg core-loop screens.
   Studio chrome removed (stage, studio nav, phone frame, statusbar, homebar, demo notice, landing, logo, game and public-page sections); fonts served from /fonts/sora-N.woff2. */
@font-face{font-family:Sora;src:url(/fonts/sora-0.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Sora;src:url(/fonts/sora-1.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Sora;src:url(/fonts/sora-2.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Sora;src:url(/fonts/sora-3.woff2) format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{border:0;cursor:pointer;background:none}
a{color:inherit;text-decoration:none}
button,a{transition:transform 120ms cubic-bezier(.23,1,.32,1)}
button:active{transform:scale(.98)}
button:disabled,button[aria-disabled="true"]{cursor:default;opacity:.55}
input,textarea,select{min-width:0}
input,textarea{border:0;background:transparent}
input::placeholder,textarea::placeholder{color:var(--mut)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--accent,#9d2559);outline-offset:4px}
h1,h2,h3,h4{text-wrap:balance;line-height:1.2}
h1,h2,h3,.display{font-family:Sora,system-ui,sans-serif}
h1{letter-spacing:-.055em}
h2,h3{letter-spacing:-.035em}
p{max-width:72ch}
svg.icon{height:22px;width:22px;flex:none;fill:none;stroke-width:1.5;vertical-align:middle}
.mark{width:34px;height:38px;fill:currentColor}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}
/* Tokens. Light values are the mock's :root + .t-light + .lilac + .lilac.t-light + .stage blocks merged; dark values are .t-dark with the .lilac.t-dark overrides applied.
   Put class "lilac" and data-theme on <html>: the .lilac prefixed overrides below need it, and --lift/--soft resolve against the --tx/--accent set on the same element. */
:root{color-scheme:light;--doc:#f5f4f5;--doc-tx:#322c37;--doc-mut:#696072;--tx:#322233;--mut:#726076;--milk:rgba(255,255,255,.72);--glass:rgba(255,255,255,.72);--floating:rgba(255,255,255,.91);--shadow:0 20px 48px -32px #764f6f66;--phone-shadow:0 28px 50px -30px #7e4e7270;--accent-ink:#fff;--success:#1e674c;--success-ink:#fff;--online:#1f9d5c;--away:#ebbc00;--danger:#bc023f;--scrim:rgba(30,16,35,.25);--radius:5px;--card-radius:14px;--bubble-radius:14px;--stage:#e7e4f5;--field:#f0eefb;--accent:#6747b3;--tone-a:#d7c6f7;--tone-b:#c9e3e7;--tone-c:#f3d9de;--lift:color-mix(in srgb,var(--tx) 5%,transparent);--lift-hover:color-mix(in srgb,var(--tx) 10%,transparent);--soft:color-mix(in srgb,var(--accent) 10%,transparent)}
[data-theme=dark]{color-scheme:dark;--doc-tx:#f4e8f1;--doc-mut:#c0abc3;--tx:#f4e8f1;--mut:#c0abc3;--milk:rgba(255,255,255,.065);--shadow:0 20px 48px -30px #0008;--phone-shadow:0 28px 55px -24px #0009;--accent-ink:#2a1e3c;--success:#99dcb9;--success-ink:#153525;--online:#5fd68f;--away:#f8d33f;--danger:#ffb0bd;--scrim:rgba(0,0,0,.45);--accent:#ceb8ff;--tone-a:#564270;--tone-b:#314f60;--tone-c:#664657}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){color-scheme:dark;--doc-tx:#f4e8f1;--doc-mut:#c0abc3;--tx:#f4e8f1;--mut:#c0abc3;--milk:rgba(255,255,255,.065);--shadow:0 20px 48px -30px #0008;--phone-shadow:0 28px 55px -24px #0009;--accent-ink:#2a1e3c;--success:#99dcb9;--success-ink:#153525;--online:#5fd68f;--away:#f8d33f;--danger:#ffb0bd;--scrim:rgba(0,0,0,.45);--accent:#ceb8ff;--tone-a:#564270;--tone-b:#314f60;--tone-c:#664657}
}
/* Mock body used the studio page colours (--doc); the app body takes the screen surface. */
body{font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--field);color:var(--tx);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.wordmark{font-family:Sora,system-ui,sans-serif;font-weight:700;letter-spacing:-.07em;display:inline-flex;align-items:center;gap:7px;font-size:28px;line-height:1}
.wordmark .mark{height:28px;width:27px}
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(1.15);box-shadow:var(--shadow)}
.floating{background:var(--floating);backdrop-filter:blur(24px);box-shadow:var(--shadow)}
/* Screen root. The mock's 390x844 frame, 30px corners and shadow are removed; size it to the viewport in the app. */
.phone{background:var(--field);color:var(--tx);position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;font-size:14px;line-height:1.5}
.phone:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 0% 0%,var(--tone-a),transparent 65%),radial-gradient(ellipse at 100% 65%,color-mix(in srgb,var(--tone-b) 55%,transparent),transparent 65%);opacity:.45;pointer-events:none}
:root{--screen-gutter:21px;--screen-header-min-height:72px}
.phone-header{padding:12px var(--screen-gutter) 16px;min-height:var(--screen-header-min-height);flex-shrink:0;display:flex;align-items:center;gap:10px}
.phone-header h3{font-size:24px;font-weight:600}
.phone-header .end{margin-left:auto;display:flex}
.icon-button{width:44px;height:44px;display:inline-grid;place-items:center;flex:none;border-radius:var(--radius);color:var(--tx)}
.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex:none;width:43px;height:43px;border-radius:50%;font-family:Sora,system-ui,sans-serif;font-weight:500;background:var(--tone-b);color:var(--tx);font-size:16px}
.avatar.sub{background:var(--lift-hover);font-family:inherit;font-size:17px}
.avatar.kylie{background:linear-gradient(130deg,var(--tone-a),var(--tone-b));font-weight:600}
.avatar.large{width:68px;height:68px;font-size:28px}
.avatar.small{width:34px;height:34px;font-size:13px}
/* Online status (contracts/presence.ts): a corner dot a quarter of the avatar (7 to 14px) with a 2px gap
   cut around it, so whatever is behind the avatar shows through. A mask clips to the element's rounded
   edge, which would clip the dot, so the mask draws the circle instead: the avatar's circle, less a disc
   around the dot, plus the dot's shape. Your own Invisible's shape is a ring. Anything painted outside
   the avatar, such as a box-shadow ring, is masked away; frame those with a wrapper instead. */
.avatar[data-presence]{--dot:clamp(7px,25%,14px);--gap:calc(var(--dot) + 4px);--disc:radial-gradient(closest-side,#000 calc(100% - .5px),transparent 100%);--shape:var(--disc);
  overflow:visible;border-radius:0;mask-repeat:no-repeat;
  mask-image:var(--shape),var(--disc),var(--disc);mask-composite:add,subtract;
  /* The dot sits in the padding box (inside any border), the circle fills the border box. */
  mask-origin:padding-box,border-box,padding-box;mask-size:var(--dot) var(--dot),100% 100%,var(--gap) var(--gap);mask-position:right 0 bottom 0,0 0,right -2px bottom -2px}
.avatar[data-presence]>img{border-radius:50%}
.avatar[data-presence]::after{content:'';position:absolute;right:0;bottom:0;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--online)}
.avatar[data-presence=away]::after{background:var(--away)}
.avatar[data-presence=invisible]{--shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.6' fill='none' stroke='black' stroke-width='4.8'/%3E%3C/svg%3E")}
.avatar[data-presence=invisible]::after{background:var(--mut)}
.verified{color:var(--accent);display:inline-flex;align-items:center}
.verified .icon{width:19px;height:19px}
.muted{color:var(--mut)}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 15px;border-radius:var(--radius);font-size:13px;font-weight:650;line-height:1.35;text-align:center}
.button.primary{background:var(--accent);color:var(--accent-ink)}
.button.secondary{background:var(--lift);color:var(--tx)}
.button.ghost{color:var(--accent)}
.button.danger{color:var(--danger)}
.button.full{width:100%}
.button.small{padding:9px 12px;min-height:44px;font-size:12px}
.button .icon{width:18px;height:18px}
.flat-link{display:flex;align-items:center;gap:12px;padding:13px 8px;min-height:48px;border-radius:var(--radius);width:100%;font-size:14px;text-align:left}
.flat-link .tail{margin-left:auto}
.flat-link .tail.icon{width:17px;height:17px;color:var(--mut)}
.flat-link .tail+.tail.icon{margin-left:0}
.flat-link .badge{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.flat-link .badge+.tail{margin-left:0}
.plain-status{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--mut);line-height:1.4}
.plain-status .icon{height:16px;width:16px}
.plain-status.success{color:var(--success)}
.plain-status.error{color:var(--danger)}
.text-label{font-size:12px;font-weight:500;color:var(--mut)}
.field{display:flex;align-items:center;gap:8px;min-height:48px;background:var(--lift);padding:0 13px;border-radius:var(--radius);width:100%}
.field input{width:100%;padding:12px 0;outline:none}
/* A prefix sits one space from the text ("sub.kylie", "$25", "Your Mistress"); the amount field keeps its gap. */
.field-prefix{margin-right:-4px}
.funds-amount .field-prefix{margin-right:0}
.field .icon{width:19px;height:19px;color:var(--mut)}
.field input:focus-visible{outline:none}
/* TextField trailing (.has-trailing): an icon button at the field's end, 2px inside its edge, with its own focus ring instead of the field's. .field-main is the hidden-label field's label beside it; it takes the left padding so the whole field up to the button focuses the input. */
.field.has-trailing{padding-right:2px}
.field.has-trailing:has(>.field-main){padding-left:0}
.field-main{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px;padding-left:13px}
.field.has-trailing>.icon-button .icon{width:22px;height:22px;color:inherit}
.field.has-trailing>.icon-button:focus-visible{outline-offset:-2px}
.field.has-trailing:has(>.icon-button:focus){outline:0}
.field textarea{width:100%;resize:vertical;min-height:80px;padding:12px 0}
.field textarea:focus-visible{outline:none}
.field.has-header{flex-direction:column;align-items:stretch;gap:0;padding-top:8px}
.field.has-header>label{display:block}
/* Select segmented: options side by side, the current one raised. Same 48px height as .field. */
/* Equal options, except one whose label needs more room takes it from the rest. */
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);gap:2px;padding:3px;border-radius:var(--radius);background:var(--lift);width:100%}
.segmented button{min-height:42px;padding:0 6px;border-radius:calc(var(--radius) - 2px);font-size:14px;font-weight:500;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.segmented button[aria-checked=true]{background:var(--floating);color:var(--tx);font-weight:600;box-shadow:0 1px 3px #0002}
.segmented button:focus-visible{outline-offset:-2px}
.segmented button:disabled{opacity:.55}
@media(hover:hover) and (pointer:fine){.segmented button[aria-checked=false]:not(:disabled):hover{color:var(--tx)}}
.tabbar{display:flex;gap:0;padding:0;margin:12px 14px 25px;border-radius:10px;flex:none;overflow:hidden;isolation:isolate}
.tabbar a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:14px 1px 15px;border-radius:0;font-size:10px;color:var(--mut)}
.tabbar a[aria-current=page]{color:var(--accent);background:var(--soft)}
.tabbar .icon{height:22px;width:22px}
.scroll-body{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding:16px;padding-bottom:var(--tabbar-space);scroll-padding-bottom:calc(16px + var(--tabbar-space))}
.inbox-tools{padding:0 var(--screen-gutter)}
.text-tabs{display:flex;align-items:center;gap:22px;margin:10px 0 7px}
.text-tabs button{position:relative;min-height:44px;padding:0 2px;color:var(--mut);font-size:13px}
.text-tabs button[aria-pressed=true]{color:var(--tx);font-weight:650}
.text-tabs button[aria-pressed=true]:after{content:'';height:3px;width:16px;background:var(--accent);position:absolute;bottom:1px;left:2px;border-radius:2px}
.text-tabs sup{font-size:10px;margin-left:4px}
.conversation{display:flex;gap:12px;align-items:center;padding:17px var(--screen-gutter);text-align:left;width:100%;min-width:0;border-radius:var(--radius)}
.conversation-body{min-width:0;flex:1}
.conversation-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.conversation-title strong{font-weight:600;font-size:15px}
.conversation-title time{color:var(--mut);font-size:11px}
.conversation-preview{display:flex;gap:8px;align-items:center;color:var(--mut);font-size:13px;margin-top:3px}
.conversation-preview>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.conversation-preview .icon{width:14px;height:14px}
.conversation-preview .unread{margin-left:auto;width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent)}
.conversation-preview.payment-preview{color:var(--accent)}
.inbox-empty{padding:18px var(--screen-gutter);color:var(--mut);font-size:13px}
.chat-header{display:flex;align-items:center;gap:8px;padding:2px 10px 4px;flex:none}
.chat-person{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-align:left;border-radius:var(--radius)}
.chat-person strong{display:block;font-size:16px;font-weight:650}
.chat-person .plain-status{margin-top:2px;font-size:11px}
.chat-person .plain-status .icon{height:12px;width:12px}
.thread{--thread-gap:14px;display:flex;flex-direction:column;gap:var(--thread-gap);padding:20px 20px 18px;overflow:hidden auto;min-height:0;flex:1;overscroll-behavior:contain;scroll-padding:20px}
.date-line{text-align:center;color:var(--mut);font-size:11px;padding:0 0 3px}
.message{max-width:85%;display:flex;flex-direction:column;gap:4px;align-self:flex-start}
.message.outgoing{align-self:flex-end}
/* Every message, theirs too, sits in a soft bubble (native MessageContent): 16px text, 12px padding, 16px corners. */
.bubble{padding:12px;border-radius:16px;background:var(--soft);color:var(--tx);font-size:16px;overflow-wrap:anywhere;line-height:1.45}
/* Inline marks in message text, and spoilers: a solid block until tapped, then the text on a tint. */
.bubble strong{font-weight:650}
.bubble em{font-style:italic}
.bubble u{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.bubble a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.bubble s{text-decoration:line-through;text-decoration-thickness:1px;color:var(--mut)}
.spoiler{display:inline;padding:1px 4px;margin:0 -1px;border-radius:4px;font:inherit;line-height:inherit;vertical-align:baseline;background:color-mix(in srgb,var(--tx) 82%,transparent);color:inherit;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.spoiler>span{visibility:hidden}
.spoiler.revealed{background:var(--lift);cursor:text}
.spoiler:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.spoiler-preview{display:inline-block;width:30px;height:9px;margin:0 1px;border-radius:3px;background:color-mix(in srgb,var(--mut) 70%,transparent);vertical-align:-1px}
/* MarkdownText: profile About. Size and line height come from the surrounding text. */
.markdown{display:grid;gap:10px;min-width:0;overflow-wrap:anywhere}
.markdown>*{margin:0}
.markdown p,.markdown li,.markdown blockquote{white-space:pre-line}
.markdown h3{font:650 1.07em/1.35 system-ui,sans-serif;letter-spacing:-.01em;color:var(--tx);margin-top:6px}
.markdown h3:first-child{margin-top:0}
.markdown ul,.markdown ol{display:grid;gap:3px;padding-left:20px}
.markdown ul{list-style:disc}
.markdown ol{list-style:decimal}
.markdown li::marker{color:var(--mut)}
.markdown blockquote{border-left:3px solid var(--soft);padding:2px 0 2px 12px;color:var(--mut)}
.markdown a{color:var(--accent);font-weight:550;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.message .message-time{font-size:10px;color:var(--mut);padding:0 2px}
.message.outgoing .message-time{align-self:flex-end}
/* A run of messages from one person (data-run): the gap closes and the corners facing the neighbouring bubbles on the sender's side tighten. */
.message[data-run=mid],.message[data-run=end]{margin-top:calc(3px - var(--thread-gap))}
.thread .message.outgoing[data-run=start] .bubble{border-bottom-right-radius:5px}
.thread .message.outgoing[data-run=mid] .bubble{border-top-right-radius:5px;border-bottom-right-radius:5px}
.thread .message.outgoing[data-run=end] .bubble{border-top-right-radius:5px}
.thread .message:not(.outgoing)[data-run=start] .bubble{border-bottom-left-radius:5px}
.thread .message:not(.outgoing)[data-run=mid] .bubble{border-top-left-radius:5px;border-bottom-left-radius:5px}
.thread .message:not(.outgoing)[data-run=end] .bubble{border-top-left-radius:5px}
.attachment{display:flex;align-items:center;gap:12px;background:var(--milk);padding:8px 14px 8px 8px;border-radius:var(--bubble-radius);width:200px}
.attachment-thumb{height:46px;width:52px;border-radius:5px;background:linear-gradient(145deg,var(--tone-c),var(--tone-b));display:grid;place-items:center;color:var(--mut)}
.attachment .file-info{font-size:12px}
.attachment .file-info span{display:block;font-size:10px;color:var(--mut);margin-top:3px}
.request-card{padding:18px;background:var(--milk);border-radius:var(--card-radius);width:100%;align-self:stretch}
.request-heading{display:flex;align-items:center;gap:9px;margin-bottom:15px;color:var(--mut);font-size:12px}
.request-heading .icon{width:17px;height:17px;color:var(--accent)}
.request-heading time{margin-left:auto;font-size:10px}
.request-heading .icon-button{width:28px;height:28px;margin:-6px -8px -6px 0;color:var(--mut)}
.request-heading .icon-button .icon{width:16px;height:16px;color:inherit}
.request-amount{display:flex;justify-content:space-between;align-items:center;gap:12px}
.request-amount strong{font-family:Sora,system-ui,sans-serif;font-size:36px;letter-spacing:-.06em;line-height:1.1;font-weight:500}
.request-amount span{color:var(--mut);font-size:13px}
.request-status{font-size:12px;line-height:1.5;color:var(--mut);margin:16px 0 12px;display:flex;align-items:center;gap:7px}
.request-status .icon{width:16px;height:16px}
.request-actions{display:flex;flex-direction:column;gap:3px}
.request-card[data-status=confirmed] .request-status{color:var(--success)}
.request-card[data-status=rejected] .request-status{color:var(--danger)}
.composer{padding:12px 12px 30px;display:flex;align-items:center;gap:6px;flex:none;position:relative}
.composer .field{min-height:44px;padding:0 12px}
.composer .field input{padding:10px 0;font-size:14px}
.composer .send{background:var(--accent);color:var(--accent-ink)}
.chat-menu{position:absolute;bottom:87px;left:16px;width:250px;z-index:10;padding:8px;border-radius:10px}
.chat-menu .flat-link{font-size:13px;padding:11px}
.chat-menu .icon{width:20px;height:20px}
.modal-layer{position:absolute;inset:0;z-index:30;background:var(--scrim);display:flex;align-items:flex-end;overscroll-behavior:contain}
.sheet{width:100%;max-height:90%;overflow:auto;padding:22px 22px 36px;border-radius:18px 18px 0 0;overscroll-behavior:contain;scroll-padding-block:16px 72px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sheet-head h4{font-size:20px;font-family:Sora,system-ui,sans-serif;font-weight:600;letter-spacing:-.035em}
/* A Back arrow before the title, in the gutter; the title then takes the rest of the row. */
.sheet-head>.icon-button:first-child:not(:last-child){margin:-6px 2px -6px -13px}
.sheet-head>.icon-button+h4{flex:1}
/* A hidden title (titleHidden) leaves the flow, so Close keeps the right edge on its own. */
.sheet-head>h4.sr-only+.icon-button{margin-left:auto}
.sheet p{font-size:13px;color:var(--mut);margin-bottom:16px}
.sheet .field{margin:8px 0 16px}
.lilac .thread{--thread-gap:19px}
.lilac .request-card{padding:20px}
.lilac .request-amount{flex-direction:column;align-items:flex-start;gap:6px}
.lilac .request-amount strong{font-size:40px}
.lilac .request-actions{display:grid;grid-template-columns:1fr}
.profile-top{position:relative;height:187px;flex:none;margin:0 16px;border-radius:10px;overflow:hidden}
.cover-art{position:absolute;inset:0;overflow:hidden;background:var(--tone-a);isolation:isolate}
.cover-art:before{content:'';position:absolute;background:var(--tone-b);width:82%;height:210%;border-radius:48%;right:-30%;top:-75%;transform:rotate(-30deg);box-shadow:-15px 5px 45px #ffffff22}
.cover-art:after{content:'';position:absolute;background:var(--tone-c);width:55%;height:120%;border-radius:48%;left:-26%;bottom:-72%;transform:rotate(30deg)}
.cover-art[data-cover=column]:before{border-radius:50% 50% 0 0;width:35%;height:140%;top:-12%;right:8%;transform:rotate(15deg)}
.cover-art[data-cover=column]:after{border-radius:50% 50% 0 0;width:30%;height:100%;left:10%;bottom:-22%;transform:rotate(-15deg)}
.cover-controls{position:absolute;inset:10px 10px auto;display:flex;justify-content:space-between;z-index:3;pointer-events:none}
.cover-controls>*{pointer-events:auto}
.cover-controls .icon-button{width:38px;height:38px;background:var(--glass);backdrop-filter:blur(12px)}
.profile-body{padding:0 24px 26px}
.identity{position:relative;padding-top:18px}
.identity .name-row{display:flex;align-items:center;gap:7px}
.identity h3{font-size:30px;font-weight:600;letter-spacing:-.05em}
.identity .location{font-size:12px;color:var(--mut);margin-top:5px}
.identity .intro-line{font-size:14px;margin:14px 0 0;color:var(--tx)}
/* The public profile while it loads: a block filling the banner, and its text lines. */
.profile-top>.skeleton{height:100%}
.identity .skeleton-lines{display:grid;gap:10px;margin-top:16px}
.interests{font-size:12px;line-height:1.8;color:var(--mut);margin-top:8px;word-spacing:.06em}
.profile-nav{display:flex;gap:24px;margin-top:16px;padding:0;background:transparent}
.profile-nav button{min-height:44px;font-size:12px;color:var(--mut);padding:0;position:relative}
.profile-nav button[aria-pressed=true]{font-weight:650;color:var(--tx)}
.profile-nav button[aria-pressed=true]:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.profile-section{padding-top:21px}
.profile-section h4{font-size:14px;font-weight:650;margin-bottom:10px}
.profile-section p{font-size:13px;line-height:1.65}
.rules{margin:0;padding-left:18px;font-size:13px;line-height:1.8}
.limits{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.limits strong{font-size:12px;font-weight:650;display:block;margin-bottom:5px}
.limits p{font-size:12px;line-height:1.65;color:var(--mut)}
.leaderboard-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:9px 0}
.review{font-size:12px;padding-top:16px}
.review header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;margin-bottom:6px}
.review time{color:var(--mut)}
.review p{font-size:13px}
.profile-actions{padding:12px 20px 6px;flex:none}
.profile-actions .button{width:100%}
.profile-phone .tabbar{margin-top:0;box-shadow:none;background:none;backdrop-filter:none}
.profile-phone .scroll-body{scrollbar-width:none}
.profile-phone .tabbar a{padding-top:12px;padding-bottom:12px}
.lilac .profile-top{height:222px;margin:0;border-radius:0}
.lilac .identity{margin-top:-58px;background:var(--glass);backdrop-filter:blur(16px);padding:18px;border-radius:12px}
.lilac .profile-body{padding:0 20px 24px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:48px;font-size:13px}
.toggle{appearance:none;cursor:pointer;width:38px;height:22px;border-radius:12px;background:var(--lift-hover);position:relative;flex:none}
.toggle:before{content:'';position:absolute;width:16px;height:16px;top:3px;left:3px;border-radius:50%;background:var(--tx)}
.toggle:checked{background:var(--accent)}
.toggle:checked:before{transform:translateX(16px);background:var(--accent-ink)}
/* Status toast from the elements board (mock scoped it as .element-block .toast-example). */
.toast-example{padding:14px;display:flex;gap:10px;align-items:center;border-radius:8px;font-size:12px}
.toast-example .icon{color:var(--success)}
@media(hover:hover) and (pointer:fine){
  .button.primary:hover{filter:brightness(1.09)}
  .button.secondary:hover,.button.ghost:hover,.button.danger:hover,.icon-button:hover,.flat-link:hover,.conversation:hover{background:var(--lift-hover);color:var(--tx)}
  .text-tabs button:hover,.profile-nav button:hover{color:var(--tx)}
}
@media(max-width:390px){
  .thread{padding:16px 14px}
  .chat-header{gap:4px;padding-left:5px;padding-right:5px}
  .chat-header .avatar{width:36px;height:36px}
  .chat-person{gap:7px}
  .chat-person .plain-status{font-size:10px}
  .profile-body{padding-left:18px;padding-right:18px}
  .request-card{padding:15px}
  .request-actions .button{font-size:12px}
  .phone-header h3{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;scroll-behavior:auto!important}
  button:active{transform:none}
}
.profile-phone .scroll-body{scroll-padding-bottom:24px}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.phone-header .icon-button{margin-left:auto}
.phone-header-leading{display:flex;align-items:center;flex:none}
.phone-header .phone-header-leading .icon-button{margin-left:0}
.lilac .phone .request-actions .primary:hover{background:var(--accent);color:var(--accent-ink)}
@media(prefers-reduced-transparency:reduce){
  .glass,.floating{background:var(--field);backdrop-filter:none}
  .identity{backdrop-filter:none!important;background:var(--field)!important}
}
@media(prefers-contrast:more){
  .glass,.floating{background:var(--field);backdrop-filter:none}
  .button.secondary,.field,.field.has-trailing:has(>.icon-button:focus){outline:1px solid var(--mut);outline-offset:-1px}
}
.profile-identity-row{display:flex;align-items:center;gap:14px;min-width:0}
.profile-identity-copy{flex:1;min-width:0}
.profile-identity-copy h3{font-size:24px;overflow-wrap:anywhere}
.lilac .profile-identity-row .avatar{width:60px;height:60px;font-size:26px}
.lilac .profile-identity-copy .location{font-size:12px;line-height:1.45;margin-top:5px}
.profile-social-row{padding-left:70px;margin:1px 0 8px}
.social-logos{display:flex;align-items:center;gap:2px}
.social-logos .icon-button{width:44px;height:44px;color:var(--mut)}
.social-logos .icon{width:19px;height:19px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.lilac .identity .intro-line{margin-top:4px;font-size:13px}
.lilac .identity .interests{font-size:11px;margin-top:5px;line-height:1.6}
.profile-actions{padding-top:12px;padding-bottom:10px}
.chat-header{min-height:56px}
.chat-header .avatar{width:38px;height:38px;font-size:15px}
.chat-person{min-height:48px;gap:10px}
.chat-person .chat-identity{min-width:0}
.chat-person .chat-identity strong{display:flex;align-items:center;gap:7px;min-width:0}
.chat-person .chat-identity .chat-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-balance{gap:5px!important;font-size:11px!important;white-space:nowrap}
.chat-balance .icon{width:13px!important;height:13px!important}
.chat-balance .owing{color:var(--accent)}
.mute-indicator .icon{width:14px;height:14px;color:var(--mut)}
.lilac .chat-phone .thread{--thread-gap:12px;padding-top:15px}
.lilac .request-card{padding:16px 17px;background:var(--milk)}
.lilac .request-heading{margin-bottom:12px;font-size:11px}
.lilac .request-amount{flex-direction:row;align-items:center}
.lilac .request-amount strong{font-size:30px;font-weight:500}
.lilac .request-status{margin:13px 0 10px;font-size:11px}
.lilac .request-actions{display:flex;flex-direction:row;gap:8px}
.lilac .request-actions .button{min-height:42px;padding:10px 13px;font-size:12px}
.lilac .request-actions .primary{flex:1}
.lilac .request-actions .ghost{flex:none;color:var(--mut)}
.lilac .chat-phone .message-time{font-size:10px}
.payment-totals{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 22px}
.payment-totals>div{display:flex;flex-direction:column;gap:4px}
.payment-totals strong{font-family:Sora,system-ui,sans-serif;font-size:30px;font-weight:500;letter-spacing:-.055em}
.payment-totals span{font-size:12px;color:var(--mut)}
.payment-totals>div:last-child strong{color:var(--accent)}
.managed-payment .request-card{background:var(--lift)}
.payment-history{margin:10px 0 8px}
.payment-history summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;font-size:13px;list-style:none;padding:8px 0}
.payment-history summary::-webkit-details-marker{display:none}
.payment-history summary .icon{width:16px;height:16px;color:var(--mut)}
.payment-history-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;font-size:13px}
.payment-history-row small{display:block;color:var(--mut);font-size:11px;margin-top:2px}
.payment-history-row strong{font-weight:550}
.sub-settings .flat-link{padding-left:0;padding-right:0;font-size:13px}
.sub-settings .tail{font-size:11px}
.sub-settings .flat-link[aria-pressed=true]{color:var(--accent)}
@media(hover:hover) and (pointer:fine){
  .chat-person:hover{background:var(--lift-hover)}
  .social-logos .icon-button:hover{background:var(--lift-hover);color:var(--tx)}
  .payment-history summary:hover{color:var(--accent)}
}
@media(max-width:390px){
  .chat-person{gap:8px}
  .chat-person .chat-balance{font-size:10px!important}
  .lilac .request-actions .button{padding:9px 10px;font-size:11px}
  .lilac .profile-identity-row .avatar{width:52px;height:52px;font-size:23px}
  .profile-identity-row{gap:10px}
  .profile-social-row{padding-left:56px}
  .profile-identity-copy h3{font-size:22px}
  .lilac .profile-identity-copy .location{font-size:11px}
}
.profile-social-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:0}
.profile-website{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;font-size:12px;color:var(--mut);border-radius:0;white-space:nowrap;text-underline-offset:3px;text-decoration-thickness:1px}
.profile-website .icon{width:14px;height:14px}
.leaderboard-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.leaderboard-heading h4{margin:0}
.leaderboard-period{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:44px;font-size:11px;color:var(--mut);border-radius:var(--radius);white-space:nowrap}
.leaderboard-period i{position:relative;width:28px;height:17px;border-radius:10px;background:var(--lift-hover)}
.leaderboard-period i:before{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:var(--mut)}
.leaderboard-period[aria-checked=true] i{background:var(--accent)}
.leaderboard-period[aria-checked=true] i:before{transform:translateX(11px);background:var(--accent-ink)}
@media(hover:hover) and (pointer:fine){
  .profile-website:hover{color:var(--accent);text-decoration-line:underline}
  .leaderboard-period:hover{background:var(--lift-hover);color:var(--tx)}
}
.profile-website:active,.profile-website:focus-visible{color:var(--accent);text-decoration-line:underline}
.chat-menu{padding:8px 0;overflow:hidden}
.chat-menu .flat-link{border-radius:0;padding:12px 18px}
.chat-menu .flat-link:focus-visible{outline-offset:-3px}
.sheet>.flat-link,.sheet-content>.flat-link,.sub-settings>.flat-link{border-radius:0;width:calc(100% + 44px);margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
.tabbar a:focus-visible{outline-offset:-4px}
.tabbar a:active{background:var(--soft);color:var(--accent)}
@media(hover:hover) and (pointer:fine){
  .tabbar a:hover{background:color-mix(in srgb,var(--accent) 5%,transparent);color:var(--accent)}
  .tabbar a[aria-current=page]:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
}
/* The mock drew portraits from a sprite (background-image); the app renders a real photo inside this box. */
.portrait{display:block;flex:none;position:relative;overflow:hidden;aspect-ratio:1;width:100%;border-radius:5px}
.discovery-toolbar{padding:0 var(--screen-gutter) 12px;flex:none}
.discovery-sort{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.filter-trigger{display:flex;gap:8px;align-items:center;min-height:44px;padding:0 4px;border-radius:var(--radius);font-size:13px}
.filter-trigger .icon{width:18px;height:18px}
.filter-trigger [data-filter-count]{font-size:11px;color:var(--accent)}
.sort-control{position:relative;display:flex;align-items:center}
.sort-control select{appearance:none;background:transparent;color:var(--tx);padding:12px 24px 12px 8px;min-height:44px;font-size:12px;border:0;border-radius:var(--radius);max-width:170px}
.sort-control>.icon{position:absolute;right:3px;width:14px;height:14px;pointer-events:none}
.result-count{font-size:11px;color:var(--mut);padding:2px 4px 0}
.discovery-results{padding:0 var(--screen-gutter) calc(20px + var(--tabbar-space));scrollbar-width:none}
.discovery-person{position:relative;min-width:0;display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:18px;padding:16px 0;border-radius:0}
.discovery-person:first-child{padding-top:4px}
.discovery-person .portrait{height:auto;aspect-ratio:1}
.discovery-person h4{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:18px;font-weight:600;line-height:1.4}
.discovery-person .pronouns{flex:none;font-family:system-ui,sans-serif;font-size:11px;font-weight:400;letter-spacing:0;color:var(--mut);white-space:nowrap}
.discovery-profile-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discovery-location{font-size:11px;color:var(--mut);margin-top:9px;line-height:1.5}
.discovery-details{min-width:0}
.discovery-bio{font-size:12px;margin-top:8px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discovery-profile-link::after{content:"";position:absolute;inset:0}
.discovery-profile-link:focus-visible,.roster-person:focus-visible{outline:none}
.discovery-profile-link:focus-visible::after,.roster-person:focus-visible::after{outline:2px solid var(--accent);outline-offset:-3px;border-radius:inherit}
.discovery-message{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-left:-8px;font-size:12px;font-weight:600;color:var(--accent);border-radius:5px}
.discovery-empty{grid-column:1/-1;text-align:center;padding:45px 12px;color:var(--mut)}
.discovery-empty p{margin-bottom:12px}
.discovery-filter-form label{display:flex;flex-direction:column;gap:9px;font-size:12px;margin:0 0 20px}
.discovery-filter-form select{background:var(--lift);color:var(--tx);min-height:46px;padding:10px 12px;border:0;border-radius:var(--radius)}
.discovery-filter-form .button{margin-top:8px}
.roster-search{padding:0 var(--screen-gutter) 5px;flex:none}
.roster-order-note{font-size:11px;color:var(--mut);padding:12px 2px 4px}
.roster-scroll{padding:0 0 calc(20px + var(--tabbar-space));scrollbar-width:none}
.sub-roster{padding:0;margin:0;list-style:none}
.sub-roster-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:20px var(--screen-gutter);min-height:91px;border-radius:0}
.roster-person{display:flex;align-items:center;gap:12px;min-width:0;padding:0;border-radius:0}
.roster-person::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sub-roster-row:focus-within,.sub-roster-row:active{background:var(--lift-hover)}
.roster-person>span:last-child{min-width:0}
/* The name is a group, so a long name ellipsizes and Age verified stays 4px after it. */
.roster-person strong{display:flex;align-items:center;gap:4px;min-width:0;font-size:14px;font-weight:600}
.roster-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster-person small{display:block;color:var(--mut);font-size:11px;margin-top:5px}
.roster-money{display:flex;flex-direction:column;gap:4px;font-size:11px;min-width:83px}
.roster-money>div{display:flex;justify-content:space-between;gap:12px}
.roster-money dt{color:var(--mut);font-size:10px}
.roster-money dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
/* Loading rows keep the roster's columns; nothing in them is a target. */
.sub-roster-loading{pointer-events:none}
.sub-roster-loading .roster-person>span{flex:1;display:grid;gap:7px}
.sub-roster-loading .roster-money{align-items:flex-end;justify-items:end;row-gap:9px}
.has-owing{color:var(--accent);font-weight:600}
.roster-grab,.roster-move{display:none}
.roster-empty{font-size:13px;color:var(--mut);padding:30px var(--screen-gutter)}
.my-doms-empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 30px 40px;text-align:center;color:var(--mut);font-size:14px}
.my-doms-empty-text{display:grid;gap:4px}
.my-subs-phone[data-reordering=true] .roster-search .field{display:none}
.my-subs-phone[data-reordering=true] .roster-grab{display:grid;width:30px;min-height:44px;touch-action:none;cursor:grab}
.my-subs-phone[data-reordering=true] .sub-roster-row{grid-template-columns:30px minmax(0,1fr) auto;gap:5px}
.my-subs-phone[data-reordering=true] .roster-person{pointer-events:none}
.my-subs-phone[data-reordering=true] .roster-person::after{display:none}
.my-subs-phone[data-reordering=true] .roster-person .avatar{width:32px;height:32px;font-size:14px}
.my-subs-phone[data-reordering=true] .roster-money{display:none}
.my-subs-phone[data-reordering=true] .roster-move{display:flex}
.roster-move .icon-button{width:35px}
.roster-move .icon{width:17px;height:17px}
.roster-drag-ghost{position:fixed;z-index:100;pointer-events:none;background:var(--floating);box-shadow:var(--shadow);border-radius:5px!important;padding-left:6px!important;padding-right:6px!important;will-change:transform}
.sub-roster-row.drag-origin{opacity:.22}
.my-subs-phone.dragging{user-select:none}
@media(hover:hover) and (pointer:fine){
  .filter-trigger:hover,.sort-control select:hover,.discovery-person:hover,.discovery-message:hover,.sub-roster-row:hover{background:var(--lift-hover)}
}
@media(max-width:390px){
  .discovery-person{grid-template-columns:92px minmax(0,1fr);gap:13px}
  .discovery-person .portrait{height:auto}
  .discovery-person h4{font-size:16px}
  .discovery-bio{font-size:11px}
  .discovery-location{font-size:10px}
  .roster-money{min-width:77px}
  .roster-person{gap:8px}
  .roster-person strong{font-size:12px}
  .roster-person .avatar{width:36px;height:36px;font-size:14px}
}
.chat-dock{flex:none;position:relative;box-shadow:none}
.chat-dock .composer{background:transparent;box-shadow:none;backdrop-filter:none}
/* The header's payment pill: soft for optional actions, accent when money waits on the viewer, quiet text while waiting on the other side. */
.header-action{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px 0 10px;margin-right:2px;border-radius:19px;background:var(--soft);color:var(--accent);font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.header-action .icon{width:17px;height:17px}
.header-action.primary{background:var(--accent);color:var(--accent-ink)}
.header-action.quiet{background:none;color:var(--mut);font-weight:500}
.funds-menu{margin:0 -22px}
.funds-menu .flat-link{width:100%;border-radius:0;padding:14px 22px;gap:12px;min-height:58px;text-align:left;font-size:14px}
.funds-menu .flat-link>.icon{width:22px;height:22px}
.funds-menu .tail{margin-left:auto;white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums;color:var(--mut)}
.funds-menu .tail.icon{width:17px;height:17px}
.funds-form>label:not(.funds-toggle){display:block;font-size:12px;color:var(--mut);margin-bottom:8px}
.funds-form .field{margin:0 0 20px}
.funds-form .funds-amount{min-height:62px;gap:9px}
.funds-amount input{font-family:Sora,system-ui,sans-serif;font-size:27px;--input-size:27px;padding:10px 0;width:100%}
.funds-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;min-height:48px;font-size:13px}
.funds-toggle input{margin:0}
.funds-effect{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--mut);padding:10px 0 20px;min-height:48px}
.funds-effect output{color:var(--tx);font-variant-numeric:tabular-nums;font-weight:600}
.funds-form .inline-error{margin:0 0 12px;color:var(--danger);font-size:12px}
/* Generalised from .funds-form .inline-error for forms outside the funds sheets (sign-in). */
.inline-error,.sheet .inline-error{color:var(--danger);font-size:12px}
.funds-sheet-total{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:2px 0 22px;font-size:13px;color:var(--mut)}
.funds-sheet-total strong{font-family:Sora,system-ui,sans-serif;font-size:30px;font-weight:500;color:var(--tx);font-variant-numeric:tabular-nums}
.funds-settle-form{margin-top:20px}
.funds-event{align-self:center;max-width:100%;padding:5px 0;text-align:center;font-size:11px;color:var(--mut);overflow-wrap:anywhere}
.managed-payment .request-card+.request-card{margin-top:12px}
.request-card[data-status=replaced]{background:transparent!important;padding-top:8px!important;padding-bottom:8px!important}
.request-card[data-status=replaced] .request-amount strong{font-size:20px}
.request-card[data-status=replaced] .request-heading,.request-card[data-status=replaced] .request-amount,.request-card[data-status=replaced] .request-status{margin:4px 0}
@media(hover:hover) and (pointer:fine){
  .header-action:not(.quiet):hover{filter:brightness(1.09)}
  .funds-menu .flat-link:hover{background:var(--lift-hover);color:var(--tx)}
}
@media(max-width:390px){
  .header-action{font-size:12px;padding:0 11px 0 9px}
}
.sheet:has(.funds-menu,.funds-form,.funds-sheet-total){overflow-x:hidden}
/* ---- @beg/ui additions below this line. Everything above is the untouched lilac.css port. ---- */
/* Screen root fills the viewport and takes the top and bottom safe areas (left and right are on body). */
.phone{height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
/* Room at the foot of a screen covered by a floating tab bar. The app's tab shell sets it. */
:root{--tabbar-space:0px}
/* No pull-to-refresh on the shell (vertical only, so trackpad back-swipe still works); inner scrollers contain their own overscroll. */
html,body{overscroll-behavior-y:none}
/* Sheet as a native <dialog>: reset the UA box, use the dialog itself as the scrim layer. */
dialog.modal-layer{display:none;position:fixed;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit}
dialog.modal-layer[open]{display:flex}
dialog.modal-layer::backdrop{background:transparent}
.modal-layer .sheet{max-width:440px;margin:0 auto}
/* Sheet motion: transform and opacity only, ease-out in, instant out. prefers-reduced-motion above disables transitions. */
dialog.modal-layer[open]{opacity:1;transition:opacity 200ms cubic-bezier(.23,1,.32,1)}
dialog.modal-layer[open] .sheet{transform:none;transition:transform 260ms cubic-bezier(.32,.72,0,1)}
@starting-style{
  dialog.modal-layer[open]{opacity:0}
  dialog.modal-layer[open] .sheet{transform:translateY(100%)}
}
/* Text label above its field (7px from the elements board), error below. */
.text-label+.field{margin-top:7px}
.field+.inline-error{margin:8px 0 12px}
.field select{width:100%;min-height:46px;padding:12px 0;border:0;background:transparent;color:var(--tx);cursor:pointer}
.field select:focus-visible{outline:none}
/* Disabled tab item (My doms in this pass). */
.tabbar a[aria-disabled=true]{opacity:.55;pointer-events:none}

.sheet [data-testid="abuse-report-form"] p { margin-bottom: 0; }
.sheet [data-testid="abuse-report-form"] .field { margin: 0; }

/* Chips (toggle, removable, pending), tag pills and the combobox listbox for discovery. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:18px;border:1px solid var(--lift-hover);background:var(--milk);color:var(--tx);font-size:13px;white-space:nowrap;transition:background-color 120ms ease}
.chip .icon{width:14px;height:14px}
.chip.on,.chip[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.pending{border-style:dashed;color:var(--mut)}
.chip.pending em{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:2px 5px;border-radius:3px;background:var(--lift)}
.chip .x{display:grid;place-items:center;width:24px;height:24px;margin:0 -8px 0 -2px;border-radius:50%;color:inherit}
@media(pointer:coarse){.chip{min-height:44px}}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border-radius:4px;background:var(--soft);color:var(--accent);font-size:11px;font-weight:500;white-space:nowrap}
.pill.more{background:none;color:var(--mut)}
.combobox{position:relative;min-width:0}
.combobox-popup{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--desktop-panel,var(--field));border:1px solid var(--lift-hover);border-radius:10px;box-shadow:0 12px 32px rgba(30,16,35,.14);padding:6px;max-height:280px;overflow:auto}
.combobox-popup ul{list-style:none;margin:0;padding:0}
.combobox-group{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:10px 12px 4px}
.combobox-option{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:6px;cursor:pointer}
.combobox-option b{font-weight:500}
.combobox-option small{color:var(--mut);font-size:12px;margin-left:auto;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.combobox-option[aria-selected=true]{background:var(--soft)}
.combobox-empty{padding:12px;color:var(--mut);font-size:13px}
.combobox-popup>.button{width:100%;justify-content:flex-start;border-top:1px solid var(--lift-hover);border-radius:0 0 6px 6px}
@media(hover:hover) and (pointer:fine){
  .chip:not(.on):not([aria-pressed=true]):hover,.combobox-option:hover{background:var(--lift-hover)}
  .chip.on .x:hover,.chip[aria-pressed=true]:hover{filter:brightness(1.09)}
}

.sheet-content{display:contents}

/* Desktop action menu: a popover anchored to its trigger (ActionMenu.web) */
.desktop-action-menu{position:fixed;inset:auto;width:280px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:0;padding:6px 0;overflow:auto;border:1px solid var(--desktop-line,color-mix(in srgb,var(--tx) 9%,transparent));border-radius:8px;background:var(--desktop-panel,var(--field));color:var(--tx);box-shadow:0 16px 48px -18px rgba(25,15,38,.35);overscroll-behavior:contain}
.desktop-action-menu .funds-menu{margin:0}
.desktop-action-menu .flat-link,.desktop-action-menu .funds-menu .flat-link{width:100%;min-height:46px;margin:0;padding:12px 16px;gap:12px;border-radius:0;font-size:13px}
.desktop-action-menu .flat-link>.icon,.desktop-action-menu .funds-menu .flat-link>.icon{width:19px;height:19px;color:var(--accent);flex:none}
.desktop-action-menu .flat-link .tail{font-size:12px;white-space:nowrap}
.desktop-action-menu .flat-link:focus-visible{outline-offset:-3px}

/* ---- Chat styles. A ChatStyleScope wrapper carries data-palette, data-family and (when the domme forces one) data-theme.
   Tokens computed from --tx and --accent are re-declared on the wrapper because :root computes them from its own values.
   Palette values mirror chatPalettes in packages/contracts/src/chatStyle.ts; keep the two in step. ---- */
.chat-style{display:contents;color:var(--tx);--desktop-line:color-mix(in srgb,var(--tx) 9%,transparent);--desktop-panel:var(--theme-panel);--lift:color-mix(in srgb,var(--tx) 5%,transparent);--lift-hover:color-mix(in srgb,var(--tx) 10%,transparent);--soft:color-mix(in srgb,var(--accent) 10%,transparent)}
[data-theme=light]{color-scheme:light;--doc:#f5f4f5;--doc-tx:#322c37;--doc-mut:#696072;--tx:#322233;--mut:#726076;--milk:rgba(255,255,255,.72);--glass:rgba(255,255,255,.72);--floating:rgba(255,255,255,.91);--shadow:0 20px 48px -32px #764f6f66;--phone-shadow:0 28px 50px -30px #7e4e7270;--accent-ink:#fff;--success:#1e674c;--success-ink:#fff;--online:#1f9d5c;--away:#ebbc00;--danger:#bc023f;--scrim:rgba(30,16,35,.25);--stage:#e7e4f5;--field:#f0eefb;--accent:#6747b3;--tone-a:#d7c6f7;--tone-b:#c9e3e7;--tone-c:#f3d9de}
[data-palette=lilac]{--accent:#6747b3;--accent-ink:#ffffff;--tone-a:#d7c6f7;--tone-b:#c9e3e7}
[data-palette=lilac][data-theme=dark]{--accent:#ceb8ff;--accent-ink:#2a1e3c;--tone-a:#564270;--tone-b:#314f60}
[data-palette=rose]{--accent:#a8385f;--accent-ink:#ffffff;--tone-a:#f7c9d6;--tone-b:#fbe3d0}
[data-palette=rose][data-theme=dark]{--accent:#ffb3c8;--accent-ink:#3a1420;--tone-a:#6b3446;--tone-b:#5c4030}
[data-palette=mint]{--accent:#1f7a5c;--accent-ink:#ffffff;--tone-a:#c7ecd9;--tone-b:#d5eaf6}
[data-palette=mint][data-theme=dark]{--accent:#9be3c3;--accent-ink:#0f3325;--tone-a:#2a5544;--tone-b:#2f4a5a}
[data-palette=sky]{--accent:#2f66a8;--accent-ink:#ffffff;--tone-a:#cfe1f7;--tone-b:#e7d9f4}
[data-palette=sky][data-theme=dark]{--accent:#a9c8f5;--accent-ink:#12233d;--tone-a:#2f4667;--tone-b:#4a3b62}
[data-palette=peach]{--accent:#b4542a;--accent-ink:#ffffff;--tone-a:#fbd9c5;--tone-b:#f9e7c7}
[data-palette=peach][data-theme=dark]{--accent:#ffb894;--accent-ink:#3d1d10;--tone-a:#6a3d2a;--tone-b:#5f4a2c}
[data-palette=butter]{--accent:#8a6a10;--accent-ink:#ffffff;--tone-a:#f7e8b5;--tone-b:#e5efc7}
[data-palette=butter][data-theme=dark]{--accent:#f0d178;--accent-ink:#332809;--tone-a:#5c4d1f;--tone-b:#445236}
[data-palette=plum]{--accent:#5b2a86;--accent-ink:#ffffff;--tone-a:#b98ad9;--tone-b:#f0a7c4}
[data-palette=plum][data-theme=dark]{--accent:#c89af0;--accent-ink:#2a1240;--tone-a:#4a2a6b;--tone-b:#6b2f4a}
[data-palette=wine]{--accent:#7d1d3f;--accent-ink:#ffffff;--tone-a:#d9738f;--tone-b:#f3b8a0}
[data-palette=wine][data-theme=dark]{--accent:#f08fb0;--accent-ink:#3a0e1d;--tone-a:#5e2236;--tone-b:#6b3d2c}
[data-palette=forest]{--accent:#1e5b3a;--accent-ink:#ffffff;--tone-a:#7fc39a;--tone-b:#d9e78a}
[data-palette=forest][data-theme=dark]{--accent:#8fd8ac;--accent-ink:#0c2a19;--tone-a:#234a35;--tone-b:#4a5a24}
[data-palette=ocean]{--accent:#0f4c81;--accent-ink:#ffffff;--tone-a:#6aaee0;--tone-b:#9ee3d6}
[data-palette=ocean][data-theme=dark]{--accent:#8cc4f2;--accent-ink:#071f36;--tone-a:#1f4566;--tone-b:#215a52}
[data-palette=ember]{--accent:#b3300f;--accent-ink:#ffffff;--tone-a:#f28c6a;--tone-b:#f6c96b}
[data-palette=ember][data-theme=dark]{--accent:#ff9f7d;--accent-ink:#3a0f04;--tone-a:#6b2f1f;--tone-b:#6b5220}
[data-palette=noir]{--accent:#1b1b1f;--accent-ink:#ffffff;--tone-a:#8d8d99;--tone-b:#c9c3d6}
[data-palette=noir][data-theme=dark]{--accent:#f0eef7;--accent-ink:#1b1b1f;--tone-a:#3a3a44;--tone-b:#4a4656}
@media(prefers-color-scheme:dark){
  [data-palette=lilac]:not([data-theme=light]){--accent:#ceb8ff;--accent-ink:#2a1e3c;--tone-a:#564270;--tone-b:#314f60}
  [data-palette=rose]:not([data-theme=light]){--accent:#ffb3c8;--accent-ink:#3a1420;--tone-a:#6b3446;--tone-b:#5c4030}
  [data-palette=mint]:not([data-theme=light]){--accent:#9be3c3;--accent-ink:#0f3325;--tone-a:#2a5544;--tone-b:#2f4a5a}
  [data-palette=sky]:not([data-theme=light]){--accent:#a9c8f5;--accent-ink:#12233d;--tone-a:#2f4667;--tone-b:#4a3b62}
  [data-palette=peach]:not([data-theme=light]){--accent:#ffb894;--accent-ink:#3d1d10;--tone-a:#6a3d2a;--tone-b:#5f4a2c}
  [data-palette=butter]:not([data-theme=light]){--accent:#f0d178;--accent-ink:#332809;--tone-a:#5c4d1f;--tone-b:#445236}
  [data-palette=plum]:not([data-theme=light]){--accent:#c89af0;--accent-ink:#2a1240;--tone-a:#4a2a6b;--tone-b:#6b2f4a}
  [data-palette=wine]:not([data-theme=light]){--accent:#f08fb0;--accent-ink:#3a0e1d;--tone-a:#5e2236;--tone-b:#6b3d2c}
  [data-palette=forest]:not([data-theme=light]){--accent:#8fd8ac;--accent-ink:#0c2a19;--tone-a:#234a35;--tone-b:#4a5a24}
  [data-palette=ocean]:not([data-theme=light]){--accent:#8cc4f2;--accent-ink:#071f36;--tone-a:#1f4566;--tone-b:#215a52}
  [data-palette=ember]:not([data-theme=light]){--accent:#ff9f7d;--accent-ink:#3a0f04;--tone-a:#6b2f1f;--tone-b:#6b5220}
  [data-palette=noir]:not([data-theme=light]){--accent:#f0eef7;--accent-ink:#1b1b1f;--tone-a:#3a3a44;--tone-b:#4a4656}
}
[data-palette=pastel-pink]{--accent:#b33b79;--accent-ink:#ffffff;--tone-a:#ffd6e8;--tone-b:#ead7f5}
[data-palette=pastel-pink][data-theme=dark]{--accent:#ffb8d8;--accent-ink:#3b182a;--tone-a:#69384f;--tone-b:#53416a}
[data-palette=hot-pink]{--accent:#ca0067;--accent-ink:#ffffff;--tone-a:#ffabd1;--tone-b:#f7b2ec}
[data-palette=hot-pink][data-theme=dark]{--accent:#ff6eae;--accent-ink:#39001c;--tone-a:#742449;--tone-b:#583367}
[data-palette=lavender]{--accent:#7651b0;--accent-ink:#ffffff;--tone-a:#e5d6ff;--tone-b:#f2d6eb}
[data-palette=lavender][data-theme=dark]{--accent:#d4baff;--accent-ink:#2b173f;--tone-a:#53406d;--tone-b:#643c59}
[data-palette=aqua]{--accent:#006f78;--accent-ink:#ffffff;--tone-a:#b8eeea;--tone-b:#c7e7fa}
[data-palette=aqua][data-theme=dark]{--accent:#8de5dd;--accent-ink:#073432;--tone-a:#275853;--tone-b:#2e4c64}
[data-palette=coral]{--accent:#ae493c;--accent-ink:#ffffff;--tone-a:#ffd0c5;--tone-b:#f8dfad}
[data-palette=coral][data-theme=dark]{--accent:#ffb0a0;--accent-ink:#3c1914;--tone-a:#683c35;--tone-b:#5d4d2c}
[data-palette=gold]{--accent:#806000;--accent-ink:#ffffff;--tone-a:#f9e6aa;--tone-b:#efd3af}
[data-palette=gold][data-theme=dark]{--accent:#f4d782;--accent-ink:#302509;--tone-a:#5e4e25;--tone-b:#5d432f}
@media(prefers-color-scheme:dark){
  [data-palette=pastel-pink]:not([data-theme=light]){--accent:#ffb8d8;--accent-ink:#3b182a;--tone-a:#69384f;--tone-b:#53416a}
  [data-palette=hot-pink]:not([data-theme=light]){--accent:#ff6eae;--accent-ink:#39001c;--tone-a:#742449;--tone-b:#583367}
  [data-palette=lavender]:not([data-theme=light]){--accent:#d4baff;--accent-ink:#2b173f;--tone-a:#53406d;--tone-b:#643c59}
  [data-palette=aqua]:not([data-theme=light]){--accent:#8de5dd;--accent-ink:#073432;--tone-a:#275853;--tone-b:#2e4c64}
  [data-palette=coral]:not([data-theme=light]){--accent:#ffb0a0;--accent-ink:#3c1914;--tone-a:#683c35;--tone-b:#5d4d2c}
  [data-palette=gold]:not([data-theme=light]){--accent:#f4d782;--accent-ink:#302509;--tone-a:#5e4e25;--tone-b:#5d432f}
}
/* Bubble values belong to the nearest scope, including pastel previews inside colour accounts. Colour sets fill
   the domme's bubbles with the accent on both sides (native `filled`); pastel sets keep the soft tint. */
.chat-style[data-family=pastel]{--dom-bubble:var(--soft);--dom-ink:var(--tx)}
.chat-style[data-family=colour]{--dom-bubble:var(--accent);--dom-ink:var(--accent-ink)}
.chat-style .message.from-dom .bubble{background:var(--dom-bubble);color:var(--dom-ink)}
.chat-style .message.from-dom .bubble s{color:inherit;opacity:.7}
.chat-style[data-family=colour] .bubble a{color:inherit}
.chat-style .message.from-dom .bubble .spoiler{background:color-mix(in srgb,var(--dom-ink) 82%,transparent)}
.chat-style .message.from-dom .bubble .spoiler[aria-expanded=true],.chat-style .message.from-dom .bubble .spoiler.revealed{background:color-mix(in srgb,var(--dom-ink) 14%,transparent)}

[data-theme=light]{--theme-panel:color-mix(in srgb,var(--field) 55%,#fff)}
/* Dark surfaces are tinted by the palette's first tone. Resolve them in each scope so nested previews use their own palette.
   themeFor in tokens.ts mirrors these mixes for native and inline styles; keep the two in step. */
[data-theme=dark]{--field:color-mix(in srgb,var(--tone-a) 35%,#202027);--theme-panel:color-mix(in srgb,var(--field) 95%,var(--tx));--doc:color-mix(in srgb,var(--field) 80%,#000);--stage:var(--doc);--glass:color-mix(in srgb,var(--field) 80%,transparent);--floating:color-mix(in srgb,var(--theme-panel) 97%,transparent)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){--field:color-mix(in srgb,var(--tone-a) 35%,#202027);--theme-panel:color-mix(in srgb,var(--field) 95%,var(--tx));--doc:color-mix(in srgb,var(--field) 80%,#000);--stage:var(--doc);--glass:color-mix(in srgb,var(--field) 80%,transparent);--floating:color-mix(in srgb,var(--theme-panel) 97%,transparent)}
}

/* No focus zoom on touch: every field is at least 16px. Fields larger than that set --input-size next to their font-size (1em would resolve against the parent). */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:max(16px,var(--input-size,1em))!important}
}
.field:focus-within{outline:2px solid var(--accent);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.profile-phone .tabbar{background:var(--field)}

/* Loading placeholders. Still on purpose: no shimmer or pulse. */
.skeleton{display:block;flex:none;max-width:100%;background:var(--lift)}
.skeleton-group{display:grid;align-content:start}

/* apps/app/src/theme/app.css */
/* App-level styles on top of @beg/ui/styles.css: shell chrome and the auth forms. */

/* Skip link: off screen until focused. */
.skip-link{position:absolute;top:-64px;left:12px;z-index:50;padding:10px 14px;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:650}
.skip-link:focus{top:12px}

/* Tab shell owns the phone root; the tab screen inside fills it. The tab bar floats over the screen's foot, clear of
   the bottom safe area, so content scrolls on beneath it (into the safe area too) and shows through its glass. */
.tab-shell>.phone{height:auto;flex:1;min-height:0;padding:0;background:none}
.tab-shell>.phone:before{display:none}
.tab-shell>.tabbar{position:absolute;right:0;bottom:env(safe-area-inset-bottom);left:0;z-index:1}
/* --tabbar-space is the room the bar covers: its 12px top margin, 70px height, 25px bottom margin and the safe area.
   Scroll regions on tab screens leave it below their content, and bottom-pinned parts sit above it. Whatever hides the
   bar or keeps it in the flow sets it to 0px; :where() keeps this at no specificity so those win wherever they load. */
:where(.tab-shell:has(>.tabbar)){--tabbar-space:calc(107px + env(safe-area-inset-bottom))}
/* The shell pads only the safe area the bar's room doesn't already cover. */
.tab-shell{padding-bottom:max(0px,env(safe-area-inset-bottom) - var(--tabbar-space))}
/* The profile's flat bar stays in the flow, below the screen. */
.tab-shell.profile-phone{--tabbar-space:0px}
.tab-shell.profile-phone>.tabbar{position:static}

/* Auth forms: stacked fields with the elements board spacing. */
.form-stack{display:flex;flex-direction:column;width:100%;max-width:440px;padding:4px 21px 24px}
.form-stack>.text-label{margin-top:18px}
.form-stack>.field>span:not(.sr-only){color:var(--mut);flex:none}
.form-stack>.inline-error{margin-top:8px}
.form-stack>.button,.form-stack>a.button{margin-top:24px}
.form-stack>.button+.button,.form-stack>.button+a.button{margin-top:8px}
.choice{border:0;padding:0;margin:18px 0 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.choice legend{padding:0;margin-bottom:7px}
.choice-option,.check-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 13px;background:var(--lift);border-radius:var(--radius);cursor:pointer}
.choice-option:has(:checked){background:var(--soft);color:var(--accent);font-weight:600}
.choice-option input,.check-row input{accent-color:var(--accent);width:18px;height:18px;margin:0;flex:none}
.check-row{margin-top:18px}
.choice:focus-within,.check-row:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.choice input:focus-visible,.check-row input:focus-visible{outline:none}

/* apps/app/src/feed/feed.css */
.feed-screen {
  position: relative;
  --feed-bg: #fff;
  --feed-line: color-mix(in srgb, var(--tx) 10%, transparent);
  background: var(--feed-bg);
  color: var(--tx);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  width: 100%;
  max-width: 615px;
  margin-inline: auto;
  border-inline: 1px solid var(--feed-line);
}
[data-theme='dark'] .feed-screen {
  --feed-bg: var(--doc);
}
.feed-scroll {
  overflow: auto;
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
  padding-bottom: 100px;
  scrollbar-gutter: stable;
}
.feed-bar {
  display: flex;
  /* Sorting drops to its own row when it does not fit beside the tabs. */
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 54px;
  border-bottom: 1px solid var(--feed-line);
  padding-inline: 13px;
  gap: 5px;
  background: var(--feed-bg);
  z-index: 3;
}
.feed-tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.feed-tabs button,
.feed-profile-tabs a {
  border: 0;
  background: none;
  min-height: 46px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 650;
  color: var(--mut);
  position: relative;
  white-space: nowrap;
}
.feed-tabs button[aria-selected='true'],
.feed-profile-tabs a[aria-current='page'] {
  color: var(--tx);
}
/* The feed bar's underline is one element that slides between tabs (useTabIndicator). */
.feed-tab-indicator,
.feed-profile-tabs a[aria-current='page']:after {
  content: '';
  position: absolute;
  height: 3px;
  border-radius: 3px;
  bottom: 0;
  left: 13px;
  right: 13px;
  background: var(--accent);
  pointer-events: none;
}
.feed-sort {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  font-size: 12px;
  color: var(--mut);
}
.feed-sort .icon {
  width: 18px;
}
.feed-quick-compose {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--feed-line);
}
.feed-quick-compose > a {
  display: flex;
  flex: 1;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  color: var(--mut);
}
.feed-post {
  padding: 12px 17px 0;
  border-bottom: 1px solid var(--feed-line);
  position: relative;
}
.feed-post-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}
.feed-post-row > .link-box .avatar {
  width: 34px;
  height: 34px;
}
.feed-post-main {
  min-width: 0;
}
.feed-post-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  position: relative;
  padding-right: 30px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--mut);
}
.feed-post-top > a:first-child {
  color: var(--tx);
  font-size: 13px;
  min-height: 44px;
  margin-block: -8px;
  display: flex;
  align-items: center;
}
.feed-post-top strong {
  font-weight: 720;
  overflow-wrap: anywhere;
}
.feed-post-top time:before {
  content: '· ';
}
.feed-handle {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The author's pronouns, in place of the handle. */
.feed-pronouns {
  white-space: nowrap;
}
.feed-post-text {
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 3px 0 9px;
  overflow-wrap: anywhere;
}
.feed-post-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.feed-icon {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: none;
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--mut);
  padding: 0;
}
.feed-icon .icon {
  width: 20px;
  height: 20px;
}
.feed-post-menu {
  position: absolute;
  right: -10px;
  top: -8px;
}
.feed-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  max-width: 470px;
  min-height: 44px;
}
.feed-actions button,
.feed-actions a {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  font-size: 11px;
  padding: 0;
  color: var(--mut);
}
.feed-actions .icon {
  width: 18px;
  height: 18px;
}
.feed-actions [aria-pressed='true'] {
  color: var(--accent);
}
.feed-actions button:disabled {
  opacity: 0.5;
}
.feed-repost {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mut);
  font-size: 11px;
  min-height: 24px;
  margin-bottom: 4px;
  padding-left: 10px;
}
.feed-repost .icon {
  width: 15px;
  height: 15px;
}
.feed-repost a {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin-block: -8px;
}
/* A repost with text: her avatar and text in the post's own grid, the original boxed under her text. */
.feed-repost-by {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}
.feed-repost-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  font-size: 11px;
  color: var(--mut);
}
.feed-repost-top .icon {
  width: 15px;
  height: 15px;
}
.feed-repost-top a {
  color: var(--tx);
  font-size: 13px;
  font-weight: 720;
  min-height: 44px;
  margin-block: -8px;
  display: flex;
  align-items: center;
}
/* Folded text drops its bottom margin, so the box keeps the gap. */
.feed-repost-by .feed-post-text {
  margin: 0;
}
.feed-post-row.feed-repost-original {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  margin: 10px 0 12px 44px;
  padding: 8px 12px 0;
  border: 1px solid var(--feed-line);
  border-radius: 14px;
}
.feed-repost-original > a .avatar.avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.feed-repost-field {
  width: 100%;
  min-height: 76px;
  max-height: 180px;
  resize: none;
  margin: 6px 0 10px;
  padding: 11px 12px;
  border: 1px solid var(--lift-hover);
  border-radius: 12px;
  background: var(--field);
  font: 15px/1.45 system-ui, sans-serif;
  color: var(--tx);
}
.feed-repost-field:focus {
  outline: 0;
  border-color: var(--accent);
}
.feed-repost-field[aria-invalid='true'] { border-color: var(--danger); }
.feed-repost-refused, .feed-repost-warning { margin: -4px 0 10px; font-size: 13px; color: var(--danger); }
.feed-repost-warning { color: var(--mut); }
.feed-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 17px;
  border-radius: 24px;
  border: 1px solid var(--feed-line);
  font-size: 13px;
  font-weight: 650;
  background: var(--feed-bg);
  color: var(--tx);
}
.feed-button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.feed-button:disabled {
  opacity: 0.5;
}
.feed-status {
  padding: 10px 17px;
  font-size: 12px;
  color: var(--mut);
}
.feed-empty {
  padding: 36px 20px;
  display: grid;
  justify-items: start;
  gap: 15px;
}
.feed-empty h2 {
  font-size: 21px;
  font-family: inherit;
}
.feed-more {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.feed-composer {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feed-composer textarea {
  resize: vertical;
  border: 0;
  background: none;
  width: 100%;
  min-height: 210px;
  font: 18px/1.5 system-ui;
  color: var(--tx);
}
.feed-composer textarea:focus {
  outline-offset: 5px;
}
.feed-compose-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.feed-composer input {
  background: var(--soft);
  color: var(--tx);
  border: 0;
  border-radius: 6px;
  padding: 12px;
  min-height: 44px;
  width: 100%;
}
.feed-attachment {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}
.feed-attachment img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
}
.feed-composer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--feed-line);
}
.feed-composer-head h1 {
  font-size: 17px;
  font-family: inherit;
  flex: 1;
}
.feed-audience {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
}
.feed-profile-header {
  padding: 22px 18px 14px;
}
.feed-profile-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}
.feed-profile-header h1 {
  font-size: 23px;
  line-height: 1.3;
  font-family: inherit;
  letter-spacing: -0.03em;
  margin: 0;
}
.feed-profile-header p {
  margin: 5px 0;
  font-size: 13px;
}
.feed-profile-header .feed-handle {
  color: var(--mut);
}
.feed-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feed-profile-tabs {
  display: flex;
  min-height: 48px;
  border-bottom: 1px solid var(--feed-line);
}
.feed-profile-tabs > a {
  display: grid;
  place-items: center;
  flex: 1;
}
@media (max-width: 899px) {
  .feed-screen {
    border: 0;
    max-width: none;
  }
  .feed-bar {
    padding-inline: 6px;
  }
  .feed-tabs button {
    font-size: 12px;
    padding-inline: 10px;
  }
  .feed-quick-compose {
    display: none;
  }
  .feed-post {
    padding: 11px 13px 0;
  }
  .feed-post-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
  }
  .feed-repost-by {
    gap: 9px;
  }
  .feed-post-row.feed-repost-original {
    margin-left: 43px;
  }
  .feed-post-text {
    font-size: 14px;
    line-height: 1.5;
  }
  .feed-post-top > a:first-child {
    font-size: 13px;
  }
  .feed-handle {
    display: none;
  }
  .feed-profile-header .feed-handle {
    display: block;
  }
  .feed-profile-header h1 {
    font-size: 21px;
  }
  .feed-profile-actions .feed-button {
    font-size: 12px;
    padding-inline: 13px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .feed-actions button:hover:not(:disabled) {
    color: var(--accent);
  }
}
.feed-receipt-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid var(--feed-line);
  padding: 16px;
  border-radius: 8px;
}
.feed-receipt-setup label {
  display: grid;
  gap: 6px;
  font-size: 12px;
}
.feed-receipt-setup input {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--feed-line);
  border-radius: 6px;
  padding: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
}
.feed-receipt-setup button {
  grid-column: 1/-1;
  justify-self: start;
}
.feed-receipt-photo {
  grid-template-columns: minmax(0, 1fr) 44px;
}
.feed-receipt-photo img {
  grid-column: 1/-1;
  width: 100%;
  height: 180px;
}

.feed-quick-compose > .avatar { width: 36px; height: 36px; flex: none; }
.feed-quick-compose > a .icon { color: var(--accent); }
.feed-profile-back { display: flex; align-items: center; gap: 12px; padding: 4px 10px; min-height: 54px; border-bottom: 1px solid var(--feed-line); flex-shrink: 0; }
.feed-profile-back h1 { margin: 0; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.3; }
.feed-profile-cover { height: 96px; flex-shrink: 0; background: var(--tone-a, #d3c6e0); }
.feed-profile-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feed-profile-header { padding: 0 18px 12px; flex-shrink: 0; }
.feed-profile-identity { position: relative; margin-top: -27px; margin-bottom: 9px; align-items: flex-end; }
.feed-profile-identity > .avatar { width: 74px; height: 74px; border: 3px solid var(--feed-bg); }
.feed-profile-actions { padding-top: 32px; gap: 7px; }
.feed-profile-header h2 { margin: 0 0 7px; font-family: inherit; font-size: 21px; line-height: 1.3; letter-spacing: -.03em; }
.feed-profile-header .feed-handle { max-width: none; font-size: 12px; }
.feed-sub-header { padding-top: 18px; }
.feed-sub-header .feed-profile-identity { margin-top: 0; align-items: center; }
.feed-sub-header .feed-profile-actions { padding-top: 0; }
.feed-profile-tabs { flex-shrink: 0; min-height: 46px; }
.feed-profile-tabs a[aria-current='page']:after { left: calc(50% - 20px); right: auto; width: 40px; }
.feed-profile-tabs > .feed-sort { justify-content: center; margin-inline: 4px; }
/* Profile header while it loads: the loaded header's own boxes holding still blocks. */
.feed-profile-skel-lines { display: grid; gap: 12px; justify-items: start; padding: 4px 0 6px; }
.feed-profile-skel-tabs > span { display: grid; place-items: center; flex: 1; }
/* The circle overlaps the cover and --lift is translucent, so it gets a solid base. */
.pf-head-row > .avatar.skeleton { background-color: var(--feed-bg); background-image: linear-gradient(var(--lift), var(--lift)); }
.feed-empty h2 { margin: 0; }
@media (max-width: 899px) {
  .feed-profile-cover { height: 80px; }
  .feed-profile-header { padding-inline: 14px; padding-bottom: 10px; }
  .feed-profile-identity > .avatar { width: 68px; height: 68px; }
  .feed-profile-header h2 { font-size: 19px; }
  .feed-profile-actions .feed-button { font-size: 11px; padding-inline: 13px; }
}
@media (max-width: 899px) {
  .feed-bar { gap: 2px; }
  .feed-tabs button { flex: 1; padding-inline: 8px; }
}

/* ---------- Reading loop (feed-chat-ultimate timeline + thread boards) ---------- */

/* Feed bar: the bell replaces the account avatar on phones; the sort label always shows. */
.feed-bell { display: none; }
.feed-sort { padding: 0 8px; gap: 5px; color: var(--tx); font-weight: 600; white-space: nowrap; }
.feed-sort .icon { width: 14px; height: 14px; color: var(--mut); }
.feed-tabs button .icon { width: 12px; height: 12px; vertical-align: -1px; }
/* My doms' Exclusive toggle in Sort's slot: a 32px pill in a 44px tap area, filled while on. Where
   it doesn't fit beside the tabs (under about 345 wide) it drops to its own row, as Sort does. */
.feed-exclusive { display: flex; align-items: center; align-self: center; margin-left: auto; min-height: 44px; padding: 0 4px 0 6px; border: 0; background: none; }
.feed-exclusive > span { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 13px 0 11px; border-radius: 24px; border: 1px solid var(--feed-line); font-size: 12px; font-weight: 650; color: var(--mut); white-space: nowrap; transition: background-color 140ms ease, color 140ms ease; }
.feed-exclusive .icon { width: 13px; height: 13px; }
.feed-exclusive[aria-pressed='true'] > span { background: var(--tx); color: var(--feed-bg); border-color: transparent; }
.feed-empty-action { padding: 6px 18px 0; }
@media (max-width: 899px) {
  /* A sub's three tabs keep their own width, so Sort, the toggle or an empty slot never moves them.
     Their padding follows the screen, 6px at 345 wide to 13px from about 390, so the toggle fits
     beside them from 345 and they are spaced as drawn at 390. */
  .feed-tabs[data-fixed] { --tab-pad: clamp(6px, calc(6px + (100vw - 345px) / 6), 13px); }
  .feed-tabs[data-fixed] button { flex: 0 0 auto; padding-inline: var(--tab-pad); }
  .feed-exclusive { padding: 0 2px 0 4px; }
  .feed-exclusive > span { padding: 0 11px 0 9px; }
}
@media (hover: hover) and (pointer: fine) {
  .feed-exclusive:hover > span { border-color: var(--lift-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .feed-exclusive > span { transition: none; }
}

/* New posts pill, under the bar whether it is one row or two; the list under it never moves. */
.feed-newpill-anchor { position: relative; flex: none; height: 0; }
.feed-newpill {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 8px; border: 0; border-radius: 24px;
  background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 650; box-shadow: 0 6px 18px #2a184833; white-space: nowrap;
}
.feed-newpill > .icon { width: 15px; height: 15px; }
/* After the pill's tap, a line under the bar while the posts load. It waits 150ms, so posts read
   ahead on hover swap in without it showing. */
.feed-loadbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: 2px; background: var(--accent); transform-origin: left;
  animation: feed-loadbar 4s cubic-bezier(.1, .6, .3, 1) .15s both;
}
@keyframes feed-loadbar { from { transform: scaleX(0); } to { transform: scaleX(.9); } }
.feed-fresh > .feed-post { animation: feed-fresh 1.6s ease-out .2s both; }
.feed-stack { display: flex; }
.feed-stack .avatar.avatar { width: 24px; height: 24px; font-size: 10px; border: 2px solid var(--accent); margin-left: -7px; }
.feed-stack .avatar.avatar:first-child { margin-left: 0; }

/* Offline / failed refresh banner, Doms privacy line. */
.feed-banner, .feed-private { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--tx); border-bottom: 1px solid var(--feed-line); flex: none; }
.feed-banner { min-height: 44px; padding: 0 6px 0 14px; background: var(--lift); }
.feed-banner > .icon { width: 16px; height: 16px; color: var(--mut); flex: none; }
.feed-banner > span { flex: 1; }
.feed-banner button, .feed-end button, .feed-hidden button, .feed-closed button {
  border: 0; background: none; color: var(--accent); font-weight: 650; font-size: 12px; min-height: 44px; padding: 0 10px;
}
.feed-private { padding: 10px 14px; background: var(--soft); }
.feed-private .icon { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* First-load error, skeleton rows, end of feed, pull to refresh. */
.feed-state { padding: 44px 24px; display: grid; justify-items: center; text-align: center; gap: 8px; }
.feed-state > .icon { width: 28px; height: 28px; color: var(--mut); margin-bottom: 4px; }
.feed-state h2 { font: 650 17px/1.35 system-ui, sans-serif; margin: 0; }
.feed-state p { margin: 0 0 8px; color: var(--mut); font-size: 13px; max-width: 30ch; }
/* PostSkeleton: .feed-post's gutter and avatar; the first bar sits on the name row, the rest on the text lines. */
.feed-skel { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 17px 18px; border-bottom: 1px solid var(--feed-line); }
.feed-skel i { display: block; background: var(--lift); border-radius: 4px; height: 10px; }
.feed-skel .feed-skel-avatar { width: 34px; height: 34px; border-radius: 50%; }
.feed-skel div { display: grid; gap: 12px; align-content: start; padding-top: 9px; }
.feed-skel div i:first-child { margin-bottom: 6px; }
.feed-skel[data-comments] { padding: 12px 16px 8px; border-bottom: 0; }
.feed-replies .feed-skel { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
.feed-replies .feed-skel-avatar { width: 26px; height: 26px; }
@media (max-width: 899px) {
  .feed-skel:not([data-comments]) { padding: 11px 13px 18px; gap: 9px; }
}
@media (min-width: 900px) {
  .feed-skel[data-comments] { padding-inline: 18px; }
}
.feed-end { display: grid; justify-items: center; gap: 6px; padding: 26px 20px 30px; color: var(--mut); font-size: 12px; text-align: center; }
.feed-end .icon { width: 18px; height: 18px; color: var(--accent); }
.feed-ptr { display: grid; justify-items: center; align-content: center; gap: 6px; overflow: hidden; color: var(--mut); font-size: 12px; border-bottom: 1px solid var(--feed-line); background: var(--lift); }
.feed-ptr > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--feed-bg); color: var(--accent); box-shadow: 0 2px 8px #2a184822; transition: transform .2s ease; }
.feed-ptr .icon { width: 18px; height: 18px; }

/* Empty My feed. */
.feed-empty-head { padding: 26px 18px 10px; }
.feed-empty-head h2 { font: 650 19px/1.3 system-ui, sans-serif; margin: 0 0 4px; }
.feed-empty-head p { margin: 0; color: var(--mut); font-size: 13px; }
.feed-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--feed-line); }
.feed-person .avatar.avatar { width: 40px; height: 40px; font-size: 15px; }
.feed-person strong { display: block; font-size: 13px; font-weight: 700; }
.feed-person p { margin: 2px 0 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-person-skel > div { display: grid; gap: 7px; }
.feed-button.small { min-height: 34px; padding: 6px 14px; font-size: 12px; }
.feed-button.danger { background: var(--danger); color: #fff; border-color: transparent; }
[data-theme='dark'] .feed-button.danger { color: #2a1e3c; }
.feed-discover { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; color: var(--accent); font-weight: 650; font-size: 13px; }
.feed-discover .icon { width: 16px; height: 16px; }

/* Desktop top composer on Doms names the audience. */
.feed-quick-compose[data-audience='doms'] > a { color: var(--mut); }
.feed-aud { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--accent); padding: 5px 10px; border-radius: 24px; background: var(--soft); }
.feed-aud .icon { width: 13px; height: 13px; }

/* Hidden post folds to one line in place. */
.feed-hidden { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 17px; min-height: 52px; font-size: 13px; color: var(--mut); border-bottom: 1px solid var(--feed-line); background: var(--lift); }
.feed-hidden span { flex: 1; }
.feed-hidden button { font-size: 13px; }

/* Post card. */
.feed-post:not(.feed-post-detail) { cursor: pointer; }
.feed-post-top time { color: var(--mut); }
.feed-post-top > a:has(time) { display: flex; align-items: center; }
/* The ID verified seal sits inside the name link, so the two wrap together. */
.feed-post-top > a:first-child { gap: 3px; }
.feed-detail-name > span > a { display: flex; align-items: center; gap: 3px; min-width: 0; }
.feed-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 650; color: var(--accent); background: var(--soft); border-radius: 24px; padding: 2px 7px; white-space: nowrap; }
.feed-tag .icon { width: 11px; height: 11px; }
/* An exclusive post's marker, handle and time: one group that wraps as a unit. */
.feed-meta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.feed-meta > a { display: flex; align-items: center; }
/* The slot Share leaves on an exclusive post, so the heart keeps its place. */
.feed-share-slot { min-width: 44px; min-height: 44px; }
.feed-with { display: inline-flex; align-items: center; gap: 4px; color: var(--mut); font-size: 12px; }
.feed-with > a, .feed-with > strong { color: var(--tx); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.feed-with .avatar.avatar { width: 16px; height: 16px; font-size: 8px; }
.feed-post-text a.feed-link, .feed-post-text a.feed-mention, .feed-comment-text a { color: var(--accent); text-decoration: none; font-weight: 550; }
.feed-link { white-space: nowrap; }
.feed-link .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.feed-post-text[data-fold='true'] { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.feed-more-text { display: block; border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 650; min-height: 32px; padding: 0; margin-bottom: 4px; }
.feed-actions .icon { width: 18px; height: 18px; }
.feed-actions .feed-share-button .icon { width: 19px; height: 19px; }
.feed-actions [aria-pressed='true'] { color: var(--accent); font-weight: 650; }
.feed-heart[data-bump='a'] .icon { animation: feed-pop-a .28s ease-out 1; }
.feed-heart[data-bump='b'] .icon { animation: feed-pop-b .28s ease-out 1; }
.feed-bookmark[data-bump='a'] .icon { animation: feed-pop-a .28s ease-out 1; }
.feed-bookmark[data-bump='b'] .icon { animation: feed-pop-b .28s ease-out 1; }
.feed-count { display: inline-block; min-width: 1.5ch; }
.feed-count[data-bump='a'] { animation: feed-bump-a .22s ease-out 1; }
.feed-count[data-bump='b'] { animation: feed-bump-b .22s ease-out 1; }
.feed-stat { display: flex; align-items: center; gap: 5px; min-width: 44px; min-height: 44px; font-size: 11px; color: var(--mut); }
.feed-post-menu[aria-expanded='true'] { background: var(--soft); color: var(--accent); }
@keyframes feed-pop-a { 40% { transform: scale(1.25); } }
@keyframes feed-pop-b { 40% { transform: scale(1.25); } }
@keyframes feed-bump-a { from { transform: translateY(6px); opacity: 0; } }
@keyframes feed-bump-b { from { transform: translateY(6px); opacity: 0; } }

/* Photos: 1 keeps its shape, 2 side by side, 3 one tall + two stacked, 4 a 2x2 grid. */
.feed-photos { display: grid; gap: 2px; border-radius: 12px; overflow: hidden; margin: 2px 0 6px; border: 1px solid var(--feed-line); background: var(--soft); }
.feed-photo { position: relative; min-width: 0; min-height: 0; display: block; }
.feed-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feed-post-text + .feed-photos { margin-top: 10px; }
.feed-photos[data-count='1'] { max-height: 460px; }
.feed-photos[data-count='2'] { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
.feed-photos[data-count='3'] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.feed-photos[data-count='3'] > .feed-photo:first-child { grid-row: span 2; }
.feed-photos[data-count='4'] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.feed-photo-marks { position: absolute; left: 7px; bottom: 7px; display: flex; gap: 4px; pointer-events: none; z-index: 1; }
/* A post with nudity (mockups/nudity): blurred under one Tap to unblur (2A), or a short bar in the
   photos' place when the viewer hides nudity (3A). */
.feed-photos.is-blurred { position: relative; }
/* Scaled past the blur's soft edge, over a dark tile, so no pale rim shows inside the frame. */
.feed-photos.is-blurred .feed-photo { background: #211b2b; }
.feed-photos.is-blurred img { filter: blur(28px); transform: scale(1.3); }
.feed-photos.is-blurred .feed-photo-marks { display: none; }
.feed-photos-unblur { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 8px; border: 0; background: #21192933; cursor: pointer; }
.feed-photos-unblur:focus-visible { outline: 2px solid #c5a6ef; outline-offset: -3px; }
.feed-photos-hidden { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 2px 0 6px; padding: 0 14px; border-radius: 12px; background: var(--soft); color: var(--tx); font-size: 13px; font-weight: 600; }
.feed-photos-hidden .icon { width: 18px; height: 18px; color: var(--mut); }
.feed-post-text + .feed-photos-hidden { margin-top: 10px; }
.feed-alt { font: 700 10px/1 system-ui; padding: 4px 5px; border-radius: 4px; background: #000a; color: #fff; }
/* Link card: 'large' has its wide image on top and the host above the title; 'compact' a square image
   beside the title; 'text' no image. */
.feed-link-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 76px; margin: 2px 0 6px; border: 1px solid var(--feed-line); border-radius: 12px; overflow: hidden; color: var(--tx); text-decoration: none; transition: background-color .15s ease; }
.feed-post-text + .feed-link-card { margin-top: 10px; }
/* A post's voice note (FeedVoice): chat's player, framed like the post's photos, before them. */
.feed-voice { position: relative; margin: 2px 0 6px; border: 1px solid var(--feed-line); border-radius: 12px; background: var(--feed-bg); }
.feed-post-text + .feed-voice { margin-top: 10px; }
.feed-voice + .feed-photos { margin-top: 8px; }
.feed-voice .voice-note { min-height: 72px; padding: 12px 14px 12px 12px; }
.feed-voice .voice-note-bars i { max-width: 3px; }
a.feed-link-card:hover { background: var(--lift); }
a.feed-link-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feed-link-card[data-layout='large'], .feed-link-card[data-layout='text'] { grid-template-columns: minmax(0, 1fr); }
.feed-link-card[data-layout='text'] { min-height: 0; }
.feed-link-card > img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--soft); }
.feed-link-card[data-layout='large'] > img { height: auto; aspect-ratio: 1.91; }
/* The square image fills the row's height without setting it, as on Android. */
.feed-link-card[data-layout='compact'] > img { height: 0; min-height: 100%; }
.feed-link-card-text { display: grid; gap: 3px; align-content: center; min-width: 0; padding: 9px 12px 10px; }
.feed-link-card-text strong { font-size: 14px; font-weight: 650; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.feed-link-card-host { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--mut); }
.feed-link-card-host > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-link-card-host .icon { flex: none; width: 12px; height: 12px; }
.feed-link-card[data-layout='large'] .feed-link-card-host { order: -1; }
@media (min-width: 900px) { .feed-photos[data-count='2'], .feed-photos[data-count='3'] { aspect-ratio: 16 / 10; } }

/* Relationship strip: what a sub owes his domme; a domme's subs who hearted and commented. */
.feed-owe { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--lift); font-size: 12px; }
.feed-owe > .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.feed-owe strong { font: 600 14px/1 Sora, system-ui, sans-serif; letter-spacing: -.02em; }
.feed-owe > span { flex: 1; display: grid; gap: 2px; }
.feed-owe b { font-weight: 600; color: var(--tx); }
.feed-owe small { color: var(--mut); font-size: 11.5px; }
.feed-owe .feed-button { min-height: 36px; padding: 6px 14px; font-size: 12px; }
.feed-social { display: flex; align-items: center; gap: 8px; padding: 0 0 10px; font-size: 12px; color: var(--mut); }
.feed-social .feed-stack .avatar.avatar { width: 20px; height: 20px; font-size: 8px; border-color: var(--feed-bg); margin-left: -6px; }
.feed-social .feed-stack .avatar.avatar:first-child { margin-left: 0; }
.feed-social b { color: var(--tx); font-weight: 650; }
.feed-peek { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: center; padding: 0 0 10px; font-size: 12.5px; color: var(--tx); }
.feed-peek .avatar.avatar { width: 20px; height: 20px; font-size: 8px; }
.feed-peek > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-peek b { font-weight: 650; }

/* The post page: bigger text and the full date. */
.feed-post-detail { padding: 14px 16px 0; cursor: auto; }
.feed-post-detail .feed-post-row { display: block; }
.feed-detail-head { display: flex; align-items: center; gap: 10px; position: relative; padding-right: 34px; }
.feed-detail-head .avatar.avatar { width: 40px; height: 40px; font-size: 15px; }
.feed-detail-name { display: grid; min-width: 0; }
.feed-detail-name > span { display: flex; align-items: center; gap: 6px; }
.feed-detail-name strong { font-size: 14px; font-weight: 720; }
.feed-detail-name small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--mut); }
/* With a pill on both lines (Your {title} above, Exclusive beside the handle) the lines need air. */
.feed-detail-name:has(small .feed-tag) { row-gap: 3px; }
.feed-detail-head .feed-post-menu { right: -10px; top: 0; }
.feed-post-text.feed-detail-text { font-size: 16px; line-height: 1.5; margin: 10px 0; }
.feed-detail-date { display: block; font-size: 12px; color: var(--mut); padding-bottom: 10px; border-bottom: 1px solid var(--feed-line); }
.feed-post-detail .feed-actions { max-width: none; }

/* Sheets and popovers: rows, confirm, share. */
.feed-pop-title { display: none; font: 650 14px/1.3 system-ui, sans-serif; margin: 4px 0 6px; }
.desktop-action-menu .feed-pop-title { display: block; }
.desktop-action-menu:has(.feed-sort-list, .feed-share, .feed-confirm) { width: 300px; padding: 12px 16px 6px; border-radius: 14px; }
.desktop-action-menu:has(.feed-sheet-rows) { border-radius: 12px; padding: 6px; width: auto; min-width: 220px; }
.feed-sheet-rows { display: grid; margin: 0 -8px; }
.desktop-action-menu .feed-sheet-rows { margin: 0; }
.feed-sheet-rows hr { height: 1px; border: 0; background: var(--feed-line, color-mix(in srgb, var(--tx) 10%, transparent)); margin: 4px 10px; }
.feed-sheet-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font-size: 15px; color: var(--tx); width: 100%; text-align: left; }
.feed-sheet-row .icon { width: 21px; height: 21px; color: var(--mut); flex: none; }
.feed-sheet-row[data-danger], .feed-sheet-row[data-danger] .icon { color: var(--danger); }
/* The profile's Pin to profile entry renders a bare button; it lines up with the icon rows' text. */
.feed-pin-row:empty { display: none; }
.feed-pin-row > button { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 10px 0 45px; border: 0; border-radius: 10px; background: none; font-size: 15px; color: var(--tx); text-align: left; }
.desktop-action-menu .feed-pin-row > button { min-height: 44px; font-size: 14px; padding-left: 40px; }
.desktop-action-menu .feed-sheet-row { min-height: 44px; font-size: 14px; gap: 12px; }
.desktop-action-menu .feed-sheet-row .icon { width: 18px; height: 18px; }
.feed-confirm { display: grid; gap: 4px; }
.feed-confirm-actions { display: grid; gap: 8px; margin-top: 10px; }
.feed-confirm-actions .feed-button { width: 100%; min-height: 48px; font-size: 15px; }
.feed-quoted { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border: 1px solid var(--feed-line, color-mix(in srgb, var(--tx) 10%, transparent)); border-radius: 12px; margin-bottom: 12px; font-size: 13px; }
.feed-quoted .avatar.avatar { width: 22px; height: 22px; font-size: 9px; }
.feed-quoted p { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-audience-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--lift); }
.feed-audience-card .icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.feed-audience-card strong { display: block; font-size: 14px; }
.feed-audience-card small { display: block; font-size: 12px; color: var(--mut); }
.feed-quote { border-left: 3px solid var(--lift-hover); padding: 4px 0 4px 10px; font-size: 13px; color: var(--mut); margin: 0 0 6px; }
.feed-quote b { color: var(--tx); font-weight: 650; }

.feed-sort-list { display: grid; margin: 0 -8px; }
.feed-sort-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--tx); font-size: 15px; width: 100%; text-align: left; }
.feed-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--lift-hover); flex: none; display: grid; place-items: center; }
.feed-sort-row[aria-checked='true'] { font-weight: 650; }
.feed-sort-row[aria-checked='true'] .feed-radio { border-color: var(--accent); }
.feed-sort-row[aria-checked='true'] .feed-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.feed-sort-popular { display: grid; gap: 4px; padding-bottom: 10px; }
.feed-sort-row > .icon { width: 20px; height: 20px; color: var(--mut); flex: none; }
.feed-sort-rule { height: 1px; border: 0; background: var(--feed-line); margin: 0 0 4px 8px; }
/* Bookmarked's bar: its title where the tabs are, and Close at the end. */
.feed-bar-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin: 0; padding-left: 4px; font-size: 17px; font-family: inherit; }
.feed-bar-title .icon { width: 17px; height: 17px; color: var(--accent); }
.feed-bar-close { align-self: center; margin-left: auto; }
.feed-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-left: 38px; border-radius: 24px; background: var(--lift); }
.feed-seg button { min-height: 36px; border: 0; border-radius: 20px; background: none; font-size: 13px; font-weight: 600; color: var(--mut); }
.feed-seg button[aria-pressed='true'] { background: var(--feed-bg, #fff); color: var(--accent); box-shadow: 0 1px 4px #2a184822; }
[data-theme='dark'] .feed-seg button[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); }

.feed-share-search { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 21px; background: var(--lift); color: var(--mut); margin-bottom: 6px; }
.feed-share-search .icon { width: 17px; height: 17px; flex: none; }
.feed-share-search input, .feed-share-send input { flex: 1; min-width: 0; border: 0; background: none; color: var(--tx); font: 14px system-ui; outline-offset: 4px; }
.feed-share-chats { display: flex; gap: 4px; overflow-x: auto; margin: 4px -8px 10px; padding: 0 2px; scrollbar-width: none; }
.feed-share-chats > button { display: grid; justify-items: center; gap: 5px; width: 66px; flex: none; padding: 6px 0; border: 0; border-radius: 10px; background: none; font-size: 11px; color: var(--tx); position: relative; }
.feed-share-chats > button > span:last-child { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-share-chats .avatar.avatar { width: 50px; height: 50px; font-size: 18px; }
.feed-share-chats [aria-pressed='true'] .avatar { box-shadow: 0 0 0 2px var(--feed-bg, #fff), 0 0 0 4px var(--accent); }
.feed-share-check { position: absolute; top: 40px; right: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; border: 2px solid var(--feed-bg, #fff); }
.feed-share-check .icon { width: 12px; height: 12px; }
.feed-share-none { color: var(--mut); font-size: 12px; padding: 14px 10px; margin: 0; }
.feed-share-loading { display: flex; gap: 4px; }
.feed-share-loading > span { display: grid; justify-items: center; gap: 7px; width: 66px; flex: none; padding: 6px 0 8px; }
.feed-share-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; border-top: 1px solid var(--feed-line, color-mix(in srgb, var(--tx) 10%, transparent)); padding-top: 8px; }
.feed-share-actions button { display: grid; justify-items: center; gap: 6px; padding: 10px 0; border: 0; background: none; font-size: 12px; color: var(--tx); border-radius: 10px; }
.feed-share-actions button > span { width: 46px; height: 46px; border-radius: 50%; background: var(--lift); display: grid; place-items: center; }
.feed-share-actions .icon { width: 20px; height: 20px; }
.feed-share-send { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.feed-share-send input { min-height: 42px; padding: 0 14px; border-radius: 21px; background: var(--lift); }
.feed-share-send .feed-button { min-height: 42px; }
.feed-share-send .feed-button .icon { width: 16px; height: 16px; }

/* Toast: one at a time, with an optional Undo. It can be swiped away (useSwipeAway). */
.feed-toast {
  position: fixed; inset: auto 16px calc(96px + env(safe-area-inset-bottom)) 16px; width: fit-content; height: auto; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border: 0; border-radius: 10px;
  background: var(--tx); color: var(--field); font: 13px/1.4 system-ui, sans-serif; box-shadow: var(--shadow); white-space: nowrap;
  touch-action: none; user-select: none;
}
.feed-toast:not(:popover-open) { display: none; }
/* One line: a long name is cut, the action is not. */
.feed-toast > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A 44px target that takes 32px of the row, inside the toast's padding. */
.feed-toast button { flex: none; border: 0; background: none; color: var(--tone-a); font-weight: 650; font-size: 13px; min-height: 44px; margin: -6px -8px -6px 0; padding: 0 8px; }
[data-theme='dark'] .feed-toast button { color: var(--accent-ink); }
/* Desktop's dismiss X. Phones swipe instead. */
.feed-toast .toast-close { display: none; align-items: center; color: inherit; opacity: .7; }
.feed-toast .toast-close .icon { width: 14px; height: 14px; }
/* Phones, on the feed: the round compose button (54px, 18px from the edge) shares this band, so the
   toast stops 10px short of it on either side. Post to Doms is too wide to share it, so there the
   toast sits 10px above the button, whose top is 183px from the bottom (the tab bar's 107px, the
   button's 22px offset and its 54px height). */
@media (max-width: 899px) {
  :root:has(.feed-fab) .feed-toast { max-width: calc(100% - 164px); }
  :root:has(.feed-fab-private) .feed-toast { max-width: none; bottom: calc(193px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  .feed-toast { bottom: 28px; max-width: min(480px, calc(100% - 32px)); }
  .feed-toast .toast-close { display: flex; }
}

/* Full-screen photo viewer. */
.feed-viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b080d; color: #fff; }
.feed-viewer[open] { display: flex; flex-direction: column; }
.feed-viewer::backdrop { background: #0b080d; }
.feed-viewer-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 8px 6px; }
.feed-viewer-top > button, .feed-viewer-arrow { width: 44px; height: 44px; display: grid; place-items: center; border: 0; color: #fff; border-radius: 50%; background: #ffffff1a; }
.feed-viewer-top .icon { width: 20px; height: 20px; }
.feed-viewer-top > span { width: 44px; }
.feed-viewer-top > .feed-viewer-counter { width: auto; font-size: 13px; font-weight: 650; }
.feed-viewer-stage { flex: 1; min-height: 0; position: relative; display: flex; }
.feed-viewer-track { flex: 1; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: 28px; scrollbar-width: none; overscroll-behavior: contain; }
.feed-viewer-track[data-single='true'] { padding-inline: 0; }
.feed-viewer-track > img, .feed-viewer-track > .sensitive-photo { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; user-select: none; }
.feed-viewer-track > .sensitive-photo > img { width: 100%; height: 100%; object-fit: contain; }
.feed-viewer-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.feed-viewer-arrow[data-side='left'] { left: 28px; }
.feed-viewer-arrow[data-side='right'] { right: 28px; }
.feed-viewer-arrow .icon { width: 22px; height: 22px; }
.feed-viewer-dots { display: flex; justify-content: center; gap: 6px; padding: 10px; }
.feed-viewer-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff55; }
.feed-viewer-dots i[data-current='true'] { background: #fff; }
.feed-viewer-alt { align-self: center; max-width: 620px; margin: 0 16px calc(20px + env(safe-area-inset-bottom)); padding: 10px 12px; border-radius: 10px; background: #ffffff14; font-size: 13px; line-height: 1.45; color: #f1ebf4; }
.feed-viewer-alt b { font: 700 10px/1 system-ui; padding: 3px 5px; border-radius: 4px; background: #fff; color: #0b080d; margin-right: 8px; vertical-align: 1px; }
.feed-viewer-gap { height: calc(20px + env(safe-area-inset-bottom)); }
@media (max-width: 899px) { .feed-viewer-arrow { display: none; } }

/* Thread: flat comments, one reply level inline, the reply bar pinned at the foot. */
.feed-thread .feed-scroll { padding-bottom: 16px; }
.feed-comment-group { border-bottom: 1px solid var(--feed-line); padding-bottom: 6px; }
.feed-comment { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 16px 2px; position: relative; }
.feed-comment > .avatar.avatar { width: 34px; height: 34px; font-size: 13px; }
.feed-comment[data-focus] { background: var(--soft); }
.feed-comment[data-fresh] { animation: feed-fresh 1.2s ease-out 1; }
@keyframes feed-fresh { from { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); } }
.feed-comment-head { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 12px; color: var(--mut); padding-right: 30px; }
.feed-comment-head > a, .feed-comment-head > strong { color: var(--tx); font-weight: 700; font-size: 13px; }
/* One line: a domme's handle ellipsizes, then the name, so the badges, tag and time keep their place and
   opening Age verified never pushes the comment down. Badges sit 3px after the name. */
.feed-comment-head > :is(a, strong, .feed-comment-pronouns) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-comment-head > .feed-comment-pronouns { flex-shrink: 999; }
.feed-comment-head > :not(a, strong, .feed-comment-pronouns) { flex: none; }
.feed-comment-head > :is(.age-badge, .verified, .admin-badge) { margin-left: -3px; }
.feed-comment-head time { white-space: nowrap; }
.feed-comment-head .feed-icon { position: absolute; right: 6px; top: 4px; min-width: 40px; height: 40px; }
.feed-comment-head .feed-icon .icon { width: 18px; height: 18px; }
.feed-comment-text { font-size: 14px; line-height: 1.5; margin: 1px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-comment-text[data-tombstone] { color: var(--mut); font-style: italic; padding-bottom: 10px; }
.feed-comment-actions { display: flex; align-items: center; gap: 4px; margin-left: -10px; }
.feed-comment-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; min-width: 40px; padding: 0 10px; border: 0; border-radius: 20px; background: none; font-size: 12px; color: var(--mut); }
.feed-comment-actions .icon { width: 16px; height: 16px; }
.feed-comment-actions [aria-pressed='true'] { color: var(--accent); }
.feed-replies { padding-left: 44px; }
.feed-replies .feed-comment { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
.feed-replies .feed-comment > .avatar.avatar { width: 26px; height: 26px; font-size: 10px; }
.feed-view-replies { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 0 4px 60px; border: 0; background: none; padding: 0; font-size: 12px; font-weight: 650; color: var(--mut); }
.feed-view-replies::before { content: ''; width: 24px; height: 1px; background: var(--lift-hover); }
.feed-reply-bar { flex: none; border-top: 1px solid var(--feed-line); background: var(--feed-bg); padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 6px; }
.feed-reply-row { display: flex; align-items: flex-end; gap: 8px; }
.feed-reply-row > .avatar.avatar { width: 32px; height: 32px; font-size: 12px; margin-bottom: 8px; flex: none; }
.feed-reply-row textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 150px; resize: none; border: 0; border-radius: 24px; background: var(--lift); padding: 12px 15px; font: 15px/1.45 system-ui, sans-serif; color: var(--tx); }
.feed-reply-row textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); background: var(--feed-bg); }
.feed-send { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); flex: none; margin-bottom: 2px; }
.feed-send:disabled { opacity: .4; }
.feed-send .icon { width: 20px; height: 20px; }
.feed-reply-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut); min-height: 28px; padding-left: 4px; }
.feed-reply-note > span:not(.feed-reply-count, .avatar) { flex: 1; }
.feed-reply-note .avatar.avatar { width: 20px; height: 20px; font-size: 9px; }
.feed-reply-note .icon { width: 14px; height: 14px; }
.feed-reply-note b { color: var(--tx); font-weight: 650; }
.feed-reply-note button { display: grid; place-items: center; min-width: 36px; min-height: 32px; border: 0; background: none; color: var(--mut); }
.feed-reply-note button .icon { width: 16px; height: 16px; }
.feed-reply-count { font-variant-numeric: tabular-nums; }
.feed-reply-count[data-over='true'] { color: var(--danger); font-weight: 700; }
.feed-closed { flex: none; border-top: 1px solid var(--feed-line); background: var(--feed-bg); min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--mut); padding: 0 16px calc(8px + env(safe-area-inset-bottom)); }
.feed-closed > .icon { width: 16px; height: 16px; }
.feed-unavailable { flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; gap: 14px; padding: 24px 36px 120px; }
.feed-unavailable > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lift); color: var(--mut); }
.feed-unavailable .icon { width: 26px; height: 26px; }
.feed-unavailable h2 { font: 600 20px/1.3 Sora, system-ui, sans-serif; letter-spacing: -.035em; margin: 0; }
.feed-composer-head { min-height: 54px; flex: none; }

/* Phones: the bell, the sort label, the compose button that slides away while scrolling down. */
.feed-fab { display: none; }
@media (max-width: 899px) {
  .feed-bell { display: grid; place-items: center; min-width: 40px; }
  .feed-bell:empty { display: none; }
  .feed-sort { font-size: 12px; padding: 0 6px 0 4px; }
  .feed-scroll { padding-bottom: calc(90px + var(--tabbar-space)); }
  .feed-fab {
    position: absolute; bottom: calc(22px + var(--tabbar-space)); right: 18px; display: grid; place-items: center; width: 54px; height: 54px; border: 0;
    border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px #20152c22; z-index: 4;
    transition: transform .2s ease, opacity .2s ease;
  }
  .feed-fab .icon { width: 22px; height: 22px; }
  .feed-fab.feed-fab-private { width: auto; padding: 0 20px 0 16px; border-radius: 27px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
  .feed-fab.feed-fab-private .icon { width: 18px; height: 18px; }
  .feed-fab[data-scroll='down'] { transform: translateY(92px); opacity: 0; pointer-events: none; }
  .feed-thread .feed-scroll { padding-bottom: calc(16px + var(--tabbar-space)); }
}
@media (min-width: 900px) {
  .feed-post:not(.feed-post-detail) .feed-post-text { font-size: 15px; }
  .feed-post-top > a:first-child { font-size: 14px; }
  .feed-post-top { font-size: 12.5px; }
  .feed-reply-bar { padding: 10px 16px 14px; }
  .feed-comment { padding-inline: 18px; }
  .feed-post-text.feed-detail-text { font-size: 17px; }
}
@media (hover: hover) and (pointer: fine) {
  .feed-sheet-row:hover, .feed-sort-row:hover, .feed-share-chats > button:hover, .feed-share-actions button:hover, .feed-comment-actions button:hover { background: var(--lift); }
}
@media (prefers-reduced-motion: reduce) {
  .feed-count, .feed-heart .icon, .feed-comment[data-fresh], .feed-fresh > .feed-post, .feed-loadbar { animation: none !important; }
  .feed-fab, .feed-ptr > span { transition: none; }
}

/* ---------- Tab pager ---------- */

/* A page per tab side by side; a swipe snaps one tab at a time and never scrolls the page behind. */
.feed-pager {
  display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.feed-pager::-webkit-scrollbar { display: none; }
/* The timeline contains vertical overscroll only, so a sideways swipe over posts reaches the pager. */
.feed-page > .feed-scroll { overscroll-behavior-x: auto; }
.feed-page { position: relative; display: flex; flex-direction: column; flex: 0 0 100%; min-width: 0; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; }

/* apps/app/src/feed/feed-shell.css */
/* Feed pages on desktop (shell B): the white stream and the useful column, centred as a pair beside
   the sidebar. The column drops below 1200px. */
@media (min-width: 900px) {
  .desktop-app.feed-app { --feed-bg: var(--paper); --desktop-line: color-mix(in srgb, var(--tx) 10%, transparent); }
  .desktop-app.feed-app .desktop-route { flex: 0 1 615px; min-width: 0; margin-left: auto; padding: 0; overflow: hidden; }
  .desktop-app.feed-app .desktop-route .tab-shell { width: 100%; max-width: none; margin: 0; border-radius: 0; background: var(--feed-bg); }
  .desktop-app.feed-app .phone { height: 100%; min-height: 0; min-width: 0; padding: 0; background: var(--feed-bg); }
  .desktop-app.feed-app .phone:before, .desktop-app.feed-app .tabbar { display: none; }
  /* A faint thin scrollbar against the stream's edge that firms up on hover. */
  .desktop-app.feed-app .feed-scroll { scrollbar-width: thin; scrollbar-color: var(--desktop-line) transparent; }
  .desktop-app.feed-app .feed-scroll:hover { scrollbar-color: color-mix(in srgb, var(--tx) 24%, transparent) transparent; }
  .feed-app .feed-profile-about .profile-body { padding: 18px; border-radius: 0; background: var(--feed-bg); }
  .feed-app .feed-profile-about .profile-sections { display: flex; flex-direction: column; gap: 24px; }
  .feed-app .feed-profile-about .profile-rules-and-limits { display: flex; flex-direction: column; gap: 24px; }

  /* The column: cards of things to act on. */
  .feed-column { flex: none; width: 340px; margin-right: auto; padding: 18px 0 18px 24px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 14px; color: var(--tx); }
  .feed-card { border: 1px solid var(--desktop-line); border-radius: 14px; padding: 12px 14px 6px; }
  .feed-card h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; font: 700 15px/1.3 system-ui, sans-serif; letter-spacing: 0; }
  .feed-card h2 a { font-size: 12px; font-weight: 600; color: var(--accent); }
  .feed-card-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 4px 0; font-size: 12.5px; line-height: 1.4; }
  .feed-card-row + .feed-card-row { border-top: 1px solid var(--desktop-line); }
  .feed-card-row > .avatar { width: 34px; height: 34px; font-size: 12px; }
  .feed-card-text { min-width: 0; color: inherit; overflow-wrap: anywhere; }
  .feed-card-text strong { font-weight: 650; }
  .feed-card-text small { display: block; color: var(--mut); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feed-card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--soft); color: var(--accent); }
  .feed-card-icon .icon { width: 17px; height: 17px; }
  .feed-card-photo { padding: 0; object-fit: cover; }
  .feed-card-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feed-card-meter { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: var(--mut); font-size: 11.5px; white-space: nowrap; }
  .feed-card-meter b { color: var(--tx); font-weight: 600; }
  /* One length for every bar, so rows compare at a glance. */
  .feed-card-meter .wg-bar { flex: none; width: 72px; }
  .feed-card .feed-card-action { min-height: 34px; padding: 6px 14px; font-size: 12px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .feed-column { width: 300px; padding-left: 18px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .feed-column { display: none; }
  .desktop-app.feed-app .desktop-route { margin-right: auto; }
}

/* apps/app/src/support/footer-links.css */
/* Phone settings: rows tall enough to tap, inset like the menu rows above. The desktop sidebar
   tightens them in desktop.css. */
.footer-links{display:flex;flex-wrap:wrap;column-gap:16px;padding:0 8px;font-size:12px;line-height:1.4;color:var(--mut)}
.footer-links a{padding:12px 0}
@media(hover:hover) and (pointer:fine){
  .footer-links a:hover{text-decoration:underline;text-underline-offset:2px}
}

/* apps/app/src/desktop/desktop.css */
.app-layout,.app-route{display:flex;flex:1;min-width:0;min-height:0}
.app-layout{height:100dvh}
.app-route{flex-direction:column}

/* Shell B: one labelled sidebar on white, anchored at the left edge on every page. The breakpoint
   is useDesktopLayout's (900px); below it every page uses the phone tab bar. */
@media(min-width:900px){
  .desktop-app{--desktop-line:color-mix(in srgb,var(--tx) 9%,transparent);--paper:#fff;--desktop-panel:var(--theme-panel,color-mix(in srgb,var(--field) 55%,#fff));display:flex;overflow:hidden;background:var(--paper)}
  [data-theme=dark] .desktop-app{--paper:var(--doc)}
  .desktop-route{flex:1;overflow:hidden}
  .desktop-app .phone{height:100%;min-height:0;min-width:0;padding:0;background:var(--paper)}
  .desktop-app .phone:before{display:none}
  .desktop-app .tabbar{display:none}
  .desktop-app .tab-shell{--tabbar-space:0px}

  .desktop-navigation{flex:none;width:240px;display:flex;flex-direction:column;gap:6px;padding:23px 18px 18px 22px;border-right:1px solid var(--desktop-line);background:var(--paper);min-height:0;overflow-y:auto;scrollbar-width:none}
  .desktop-brand{display:flex;align-items:center;justify-content:flex-start;padding:0 13px;min-height:48px;color:var(--accent)}
  .desktop-brand .icon{width:29px;height:32px;fill:currentColor;stroke:none}
  .desktop-navigation nav{display:flex;flex-direction:column;gap:3px;margin-top:8px}
  .desktop-nav-item{display:flex;align-items:center;gap:15px;min-height:49px;padding:11px 13px;border-radius:25px;font-size:16px;color:var(--tx)}
  .desktop-nav-item[aria-current=page]{font-weight:750}
  .desktop-nav-item[aria-current=page] .icon{color:var(--accent)}
  .desktop-nav-item .nav-badge{box-shadow:0 0 0 2px var(--paper)}
  .feed-nav-compose{margin:18px 0 0;min-height:46px;font-size:14px}
  .feed-nav-compose .icon{width:18px;height:18px}
  .desktop-navigation .footer-links{gap:4px 12px;margin-top:auto;padding:12px 7px 2px}
  .desktop-navigation .footer-links a{padding:0}
  .desktop-account{display:flex;align-items:center;gap:10px;padding:12px 7px;min-width:0;border-radius:25px}
  .feed-nav-identity{min-width:0}
  .feed-nav-identity strong,.feed-nav-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .feed-nav-identity strong{font-size:12px}
  .feed-nav-identity small{font-size:11px;color:var(--mut);margin-top:3px}

  /* Chats: the list beside the thread. */
  .desktop-inbox{flex:none;width:300px;min-height:0;overflow:hidden;border-right:1px solid var(--desktop-line);background:var(--paper)}
  .desktop-inbox .inbox-phone{background:transparent}
  .desktop-inbox .phone-header{min-height:87px;padding:23px 20px 16px;justify-content:space-between}
  .desktop-inbox .phone-header h3{font-size:28px;font-weight:500;letter-spacing:-.055em}
  .desktop-inbox .icon-button{color:var(--mut)}
  .desktop-inbox .inbox-tools{padding:0 18px 9px}
  .desktop-inbox .field{min-height:44px;padding:0 12px}
  .desktop-inbox .field input{font-size:13px;padding:11px 0}
  .desktop-inbox .text-tabs{gap:17px;margin:10px 3px 0}
  .desktop-inbox .text-tabs button{font-size:12px}
  .desktop-inbox .text-tabs button[aria-pressed=true]{color:var(--accent)}
  .desktop-inbox .inbox-filter-indicator{height:2px}
  .desktop-inbox .inbox-list-motion{padding:7px 10px}
  .desktop-inbox .conversation{position:relative;min-height:88px;padding:17px 12px;gap:12px}
  .desktop-inbox .conversation[aria-current=page]{background:var(--soft)}
  .desktop-inbox .conversation[aria-current=page]:before{content:'';position:absolute;left:-10px;top:24px;bottom:24px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
  .desktop-inbox .avatar{width:38px;height:38px;font-size:15px;background:var(--tone-b)}
  .desktop-inbox .conversation:nth-of-type(3n+2) .avatar{background:var(--tone-a)}
  .desktop-inbox .conversation:nth-of-type(3n) .avatar{background:var(--tone-c)}
  .desktop-inbox .conversation-title strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .desktop-inbox .conversation-title time{font-size:10px;white-space:nowrap}
  .desktop-inbox .conversation-preview{font-size:12px;margin-top:6px;gap:6px}
  .desktop-inbox .conversation-preview .icon{width:13px;height:13px}
  .desktop-inbox .conversation-preview .unread{width:5px;height:5px}
  .desktop-inbox .inbox-pager{cursor:default;user-select:auto;-webkit-user-select:auto}
  .desktop-chat-empty{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;gap:16px;color:var(--mut);font-size:14px;height:100%}
  .desktop-chat-empty .icon{width:32px;height:32px;color:var(--accent)}
  .desktop-app .status-toast{bottom:28px}
  .desktop-app .status-toast .toast-close{display:flex}
  /* Sheets centre as dialogs. */
  .desktop-app dialog.modal-layer{align-items:center;padding:28px}
  .desktop-app .modal-layer .sheet{max-height:calc(100dvh - 56px);border-radius:14px;padding:24px}
  .desktop-app .modal-layer[open] .sheet{transition:none}
}
/* Narrow desktop: the sidebar keeps its labels; Chats shows the list or the chat, not both. */
@media(min-width:900px) and (max-width:1279px){
  .desktop-navigation{width:200px;padding-left:12px;padding-right:10px}
  .desktop-nav-item{font-size:15px;gap:12px}
}
@media(min-width:900px) and (max-width:1099px){
  .desktop-app[data-page=chats]:not([data-chat-open]) .desktop-route{display:none}
  .desktop-app[data-page=chats]:not([data-chat-open]) .desktop-inbox{flex:1;width:auto;border-right:0}
  .desktop-app[data-chat-open] .desktop-inbox{display:none}
}
@media(min-width:1600px){
  .desktop-inbox{width:320px}
}
@media(hover:hover) and (pointer:fine){
  .desktop-nav-item:hover,.desktop-account:hover,.desktop-inbox .conversation:hover{background:var(--soft)}
}

/* apps/app/src/desktop/pages.css */
.desktop-roster-heading{display:none}

@media(min-width:900px){
  /* Plain pages sit on the white page like Settings and the feed, with no panel behind them. */
  .desktop-app:is([data-page=subs],[data-page=discover],[data-page=doms],[data-page=settings],[data-page=analytics]) .desktop-route{padding:35px}
  .desktop-app:is([data-page=subs],[data-page=discover],[data-page=doms],[data-page=settings],[data-page=analytics]) .desktop-route .tab-shell{width:100%;max-width:900px;margin:0 auto;background:none}
  .desktop-app:is([data-page=subs],[data-page=discover],[data-page=doms],[data-page=settings],[data-page=analytics]) .desktop-route .tab-shell>.phone{background:transparent}
  .desktop-app:is([data-page=subs],[data-page=discover],[data-page=doms],[data-page=settings],[data-page=analytics]) .desktop-route .phone-header{padding:29px 32px 24px;min-height:88px}
  .desktop-app:is([data-page=subs],[data-page=discover],[data-page=doms],[data-page=settings],[data-page=analytics]) .desktop-route .phone-header h3{font-size:28px;font-weight:500;letter-spacing:-.045em}

  .desktop-app .my-subs-phone{--screen-gutter:32px}
  .desktop-app .roster-scroll{padding:0 17px 24px;scrollbar-width:thin;scrollbar-color:var(--desktop-line,var(--lift-hover)) transparent}
  .desktop-app .desktop-roster-heading{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 130px 130px;gap:24px;padding:12px 16px 15px;color:var(--mut);font-size:11px;border-bottom:1px solid var(--desktop-line,var(--lift-hover));background:var(--paper)}
  .desktop-app .desktop-roster-heading>span:not(:first-child){text-align:right}
  .desktop-app .sub-roster-row{grid-template-columns:minmax(0,1fr) 284px;gap:24px;min-height:97px;padding:22px 16px;border-radius:5px}
  .desktop-app .sub-roster-row .avatar{width:42px;height:42px}
  .desktop-app .roster-person{gap:13px}
  .desktop-app .roster-money{display:grid;grid-template-columns:130px 130px;gap:24px;margin:0;font-size:14px}
  .desktop-app .roster-money>div{display:block;min-width:0}
  .desktop-app .roster-money dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .desktop-app .roster-money dd{overflow-wrap:anywhere}
  .desktop-app .roster-empty{padding:32px 16px}

  .desktop-app[data-page=profile] .desktop-route{padding:44px}
  .desktop-app[data-page=profile] .desktop-route .tab-shell{width:100%;max-width:820px;margin:0 auto;background:none}
  .desktop-app[data-page=profile] .desktop-route .tab-shell>.phone{background:none}
  .desktop-app[data-page=profile] .desktop-route .profile-phone>.scroll-body{scrollbar-width:thin;scrollbar-color:var(--desktop-line,var(--lift-hover)) transparent}
  .desktop-app .profile-top{height:170px;margin:0;border-radius:10px 10px 0 0}
  .desktop-app .profile-body{padding:30px 35px 35px;border-radius:0 0 10px 10px;background:var(--desktop-panel,color-mix(in srgb,var(--field) 95%,var(--tx)))}
  .desktop-app .profile-body .identity{margin:0;padding:0;background:none;border-radius:0;backdrop-filter:none}
  .desktop-app .profile-identity-row{gap:18px}
  .desktop-app .profile-identity-row .avatar{width:80px;height:80px;font-size:32px}
  .desktop-app .profile-identity-copy h3{font-size:29px;font-weight:500}
  .desktop-app .profile-identity-copy .location{font-size:13px;margin-top:5px}
  .desktop-app .profile-social-row{justify-content:flex-start;flex-wrap:wrap;gap:12px;margin:14px 0 0}
  .desktop-app .profile-body .identity .intro-line{font-size:14px;line-height:1.7;margin-top:20px;white-space:pre-wrap;overflow-wrap:anywhere}
  .desktop-app .profile-body .identity .interests{font-size:12px;margin-top:8px;overflow-wrap:anywhere}
  .desktop-app .profile-sections{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;row-gap:24px;align-items:start;border-top:1px solid var(--desktop-line,var(--lift-hover));padding-top:25px;margin-top:26px}
  .desktop-app .profile-rules-and-limits{display:contents}
  .desktop-app .profile-rules{grid-column:1;grid-row:1}
  .desktop-app .profile-interests{grid-column:1;grid-row:2;padding:0}
  .desktop-app .profile-sections:not(:has(.profile-rules)) .profile-interests{grid-row:1}
  .desktop-app .profile-sections .limits{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:23px;margin:0}
  .desktop-app .profile-sections .limits>div:empty{display:none}
  .desktop-app .profile-sections h4,.desktop-app .profile-sections .limits strong{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.5;margin-bottom:10px}
  .desktop-app .profile-sections p,.desktop-app .profile-sections .rules{font-size:13px;line-height:1.9;color:var(--mut);overflow-wrap:anywhere}

  .desktop-app .discovery-toolbar{padding:0 32px 20px}
  /* The search shares the title row; the negative margin keeps the title where other pages put theirs. */
  .desktop-app .discover-search{display:flex;flex:1;justify-content:flex-end;min-width:0;margin:-7px 0}
  .desktop-app .discover-search>.field{max-width:440px}
  .desktop-app .discovery-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:20px 28px;padding:0 32px 32px;scrollbar-width:thin}
  .desktop-app .discovery-person,.desktop-app .discovery-person:first-child{grid-template-columns:92px minmax(0,1fr);gap:16px;padding:12px 0}
  .desktop-app .discovery-person h4{flex-wrap:wrap;gap:2px 8px;font-size:17px}
  .desktop-app .discovery-location{margin-top:5px}
  .desktop-app[data-page=settings] .desktop-route .tab-shell{max-width:620px}
  .desktop-app[data-page=settings] .desktop-route .scroll-body{padding-bottom:28px}
  .desktop-app[data-page=settings] .desktop-route .scroll-body>div:not(.payment-content){margin:0 11px}
  .desktop-app .payment-content{padding-left:32px;padding-right:32px}
  .desktop-app .payment-footer{padding:16px 32px 24px;display:flex;justify-content:flex-end;gap:12px}
  .desktop-app .payment-footer>.button{width:auto;min-width:180px}
  .desktop-app .my-doms-empty{padding-bottom:80px}
}

@media(min-width:900px) and (max-width:1100px){
  .desktop-app .desktop-roster-heading{grid-template-columns:minmax(0,1fr) 110px 110px;gap:18px}
  .desktop-app .sub-roster-row{grid-template-columns:minmax(0,1fr) 238px;gap:18px}
  .desktop-app .roster-money{grid-template-columns:110px 110px;gap:18px}
  .desktop-app .discovery-results{gap:16px 24px;padding-left:24px;padding-right:24px}
  .desktop-app .discovery-person,.desktop-app .discovery-person:first-child{grid-template-columns:76px minmax(0,1fr);gap:12px}
}

@media(min-width:900px){
}

/* apps/app/src/feed/widgets/widgets.css */
/* Feed widgets, direction A: flat in the post's text gutter, one pill action, play in a sheet
   (a dialog on desktop). Prefix wg-. Themes through the Lilac tokens; the only fixed colours are
   the wheel's own slice colours. */

/* Sheets render outside .feed-screen, so they carry the feed tokens themselves. */
.wg-sheet{--feed-bg:var(--doc,#fff);--feed-line:color-mix(in srgb,var(--tx) 10%,transparent);display:flex;flex-direction:column;font-size:13px}
.wg-sheet .game-terms{margin:6px 0 0}
.wg-sheet .game-terms>div{border-bottom:1px solid var(--feed-line);align-items:center}
.wg-sheet .game-terms>div:last-child{border-bottom:0}
.wg-sheet .game-terms dt{color:var(--mut)}
.wg-sheet-actions{display:grid;margin-top:16px}
.wg-sheet-actions.two{grid-template-columns:1fr 1fr;gap:8px}
.wg-sheet-copy{margin:0;font-size:13px;color:var(--mut)}
.wg-sheet .wg-wheel-stage{display:grid;place-items:center;padding:4px 0 8px}
.wg-sheet .wheel-visual{margin:4px auto}
.wg-reward{display:block;width:100%;max-height:min(60vh,480px);object-fit:contain;margin:4px 0 12px;border-radius:8px;background:var(--lift)}
.wg-outcomes li .icon{flex:none;width:13px;height:13px;color:var(--mut)}

/* Shared parts */
.wg{margin:4px 0 6px;font-size:13px}
.wg-kind{display:flex;align-items:center;gap:6px;min-height:22px;font-size:11px;color:var(--mut)}
.wg-kind .icon{width:14px;height:14px}
.wg-facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:11.5px;color:var(--mut)}
.wg-facts span{display:inline-flex;align-items:center;gap:5px}
.wg-facts .icon{width:14px;height:14px}
.wg-meta{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-size:11px;color:var(--mut)}
.wg-act{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:10px}
.wg-note{font-size:12px;color:var(--mut)}
.wg-headline{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:4px 0 9px;font-size:12px;color:var(--mut)}
.wg-headline.wg-gap{margin-top:10px}
.wg-push{margin-left:auto}
.wg-money{font:600 28px/1.05 Sora,system-ui,sans-serif;letter-spacing:-.045em;color:var(--tx);font-variant-numeric:tabular-nums}
.wg-money.sm{font-size:20px}
.wg-bar{position:relative;flex:1;height:5px;border-radius:3px;background:var(--lift-hover);overflow:hidden}
.wg-bar>i{display:block;height:100%;background:var(--accent);border-radius:3px}
.wg-cap{display:flex;align-items:center;gap:8px}
.wg-cap-mark{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.wg-people{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--mut)}
.wg-stack{display:inline-flex;padding-left:6px}
.wg-mini{display:inline-flex}
.wg-mini .avatar{width:22px;height:22px;font-size:9px}
.wg-stack .wg-mini{margin-left:-6px}
.wg-stack .avatar{box-shadow:0 0 0 2px var(--feed-bg)}
.wg .feed-button.wg-sm,.wg-sheet .feed-button.wg-sm{min-height:36px;padding-inline:14px;font-size:12px}
.wg .feed-button .icon,.wg-sheet .feed-button .icon{width:15px;height:15px}
.wg-sheet .feed-button.danger{background:var(--danger);color:var(--feed-bg);border-color:transparent}
.wg-fine{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--mut)}
.wg-error{margin:8px 0 0;font-size:12px;color:var(--danger)}
.wg-outcomes{list-style:none;margin:0;padding:0}
.wg-outcomes li{display:flex;align-items:center;gap:6px;min-width:0}
.wg-outcomes li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-outcomes i{width:10px;height:10px;border-radius:50%;flex:none}
.wg-outcomes-row{display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0 8px;font-size:12px}

/* Status line that replaces the action when the viewer can't play */
.wg-status{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:10px}
.wg-status-text{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:600}
.wg-status-text .icon{flex:none;width:17px;height:17px;color:var(--mut)}
.wg-status.warn .wg-status-text,.wg-status.warn .wg-status-text .icon{color:var(--danger)}
.wg-status .feed-button{white-space:nowrap}
.wg-owner-btns{display:flex;gap:8px;margin-left:auto}

/* Wheel: a small static disc beside its outcomes */
.wg-a-wheel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin:10px 0 2px}
.wg-a-wheel .wg-outcomes{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:6px 12px;font-size:12px}
.wg-disc{position:relative;flex:none}
/* The wheel editor's disc sits on a sheet, outside the feed's tokens. */
.sheet .wg-disc{--feed-bg:var(--floating)}
#wheel-editor .field{margin:0}
.wg-disc svg{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 3px var(--feed-bg),0 0 0 4px var(--lift-hover)}
.wg-disc .wg-slice{stroke:var(--feed-bg);stroke-width:.7}
.wg-disc .wg-win{fill:none;stroke:var(--tx);stroke-width:1.6;stroke-linejoin:round}
.wg-disc .wg-hub{position:absolute;left:50%;top:50%;width:18%;height:18%;transform:translate(-50%,-50%);border-radius:50%;background:var(--tx);box-shadow:0 0 0 3px var(--feed-bg)}
.wg-disc .wg-pointer{position:absolute;z-index:1;left:50%;top:-7%;width:16%;min-width:12px;height:auto;border-radius:0;box-shadow:none;transform:translateX(-50%);fill:var(--tx);stroke:var(--feed-bg);stroke-width:1.6;stroke-linejoin:round}
.wg[data-over=true] .wg-disc svg{filter:saturate(.3);opacity:.6}

/* Shared results, newest first */
.wg-board{display:flex;flex-direction:column;gap:2px;min-width:0;margin-top:10px}
.wg-board-head{margin-bottom:2px;font-size:11px;font-weight:600;color:var(--mut)}
.wg-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:30px;margin:0 -6px;padding:0 6px;border-radius:5px;font-size:12px}
.wg-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-row b{font:600 13px Sora,system-ui;letter-spacing:-.02em}
.wg-row.you{background:var(--soft);font-weight:650}
.wg-stats{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--mut)}
.wg-stats b{display:block;font:600 19px Sora,system-ui;letter-spacing:-.03em;color:var(--tx)}

/* Two truths one lie */
.wg-statements{display:flex;flex-direction:column;margin-top:4px}
.wg-statement{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:46px;padding:6px 0;border:0;border-bottom:1px solid var(--feed-line);background:none;text-align:left;font:inherit;font-size:13px;color:var(--tx)}
.wg-statement:last-child{border-bottom:0}
.wg-statement b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--lift-hover);font-size:11px;font-weight:600;color:var(--mut)}
.wg-statement[aria-checked=true] b{background:var(--accent);box-shadow:none;color:var(--accent-ink)}
.wg-statement:disabled{opacity:1;cursor:default}
.wg-statement em{padding:2px 9px;border-radius:24px;font-style:normal;font-size:11px;font-weight:650}
.wg-lie{background:var(--accent);color:var(--accent-ink)}
.wg-true{background:var(--lift-hover);color:var(--mut)}

/* Pile-on */
.wg-agreed{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:var(--success);font-weight:600}
.wg-agreed .icon{width:14px;height:14px}
.wg-waiting{margin-left:auto;font-weight:600}

/* Shared result */
.wg-result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin:10px 0 2px}
.wg-result .wg-headline{margin:0}
.wg-result-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lift);color:var(--mut)}
.wg-result-icon .icon{width:24px;height:24px}

/* Receipt */
.wg-amounts{display:flex;gap:8px;margin:4px 0 10px}
.wg-chip{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:6px;min-height:44px;border:1px solid var(--feed-line);border-radius:24px;background:var(--feed-bg);font:600 15px Sora,system-ui;letter-spacing:-.02em;color:var(--tx)}
.wg-chip small{font:500 11px system-ui,sans-serif;letter-spacing:0;color:var(--mut)}
.wg-chip[aria-pressed=true]{border-color:var(--accent);background:var(--soft);color:var(--accent)}
/* A sheet's form while it loads. Blocks in the amount row share it like the chips do. */
.wg-skel{display:grid;gap:16px}
.wg-skel .wg-amounts{margin-bottom:0}
.wg-amounts>.skeleton{flex:1}
.wg-confirms{margin-top:12px;padding-top:8px;border-top:1px solid var(--feed-line)}
.wg-confirm-row{display:grid;grid-template-columns:22px minmax(0,1fr) 44px auto;align-items:center;gap:8px;min-height:50px;font-size:13px}
.wg-confirm-row small{display:block;font-size:11px;color:var(--mut)}
.wg-confirm-row .feed-icon .icon{width:18px;height:18px}
.wg-pay-link{display:flex;gap:8px;margin-top:16px}
.wg-pay-link .feed-button{flex:1}
.wg-pay-link .feed-icon{border:1px solid var(--feed-line);border-radius:50%}
.wg-text-btn{display:block;min-height:44px;margin:6px auto 0;border:0;background:none;font-size:13px;font-weight:650;color:var(--accent)}
.wg-sheet .field{margin:8px 0 12px}

/* Owing limit settings */
.wg-limit{display:flex;flex-direction:column;gap:4px}
.wg-limit label.wg-choice{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px;border-radius:12px;font-size:14px;cursor:pointer}
.wg-limit label.wg-choice:hover{background:var(--lift)}
.wg-limit input[type=radio]{width:18px;height:18px;accent-color:var(--accent);margin:0}
.wg-limit .wg-choice small{display:block;font-size:12px;color:var(--mut)}

/* The attachment inside a composer draft, with Edit and Remove */
.wg-draft{margin:0;padding:8px 12px 10px;border:1px solid var(--feed-line);border-radius:14px}
.wg-draft-head{gap:8px;min-height:36px}
.wg-draft-head>span{flex:1;font-size:12px;font-weight:650;color:var(--tx)}
.wg-draft .game-terms{margin:8px 0 0}
.wg-draft .game-terms>div{padding:6px 0;border-top:1px solid var(--feed-line)}
.wg-draft .game-terms dt{color:var(--mut)}

/* Crypto cards: a card post and a card request, the face at most 300 wide in the gutter. A request's
   face is dashed until a sub funds one; the outline tilts with it. */
.wg-card{max-width:300px;margin:8px 0 2px}
.wg-card-ask .ccd{outline:1.5px dashed color-mix(in srgb,var(--tx) 28%,transparent);outline-offset:4px}
.wg-card-ask{margin-top:12px}
.wg-card-left{display:flex;align-items:center;gap:10px;max-width:300px;margin-top:10px;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.wg-card-left>span{white-space:nowrap}

/* Challenge: the game's library preview beside its name and her terms, and the accept sheet's steps */
.wg-challenge{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;margin:10px 0 2px}
.wg-challenge .game-preview{background:var(--lift)}
.wg-challenge-name{display:block;margin-bottom:6px;font:600 20px/1.15 Sora,system-ui,sans-serif;letter-spacing:-.035em}
.wg-challenge-facts{display:grid;gap:4px;margin:0;font-size:12px}
.wg-challenge-facts>div{display:flex;flex-wrap:wrap;gap:0 6px}
.wg-challenge-facts dt{color:var(--mut)}
.wg-challenge-facts dd{margin:0;font-weight:650;overflow-wrap:anywhere}
.wg-act-bare{min-height:0;margin-top:6px}
.wg-chat-tribute{margin-right:5px;font:600 14px Sora,system-ui,sans-serif;letter-spacing:-.02em;color:var(--tx)}
.wg-steps{list-style:none;margin:2px 0 0;padding:0}
.wg-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:center;min-height:52px;padding:6px 0;border-bottom:1px solid var(--feed-line);font-size:14px}
.wg-steps li:last-child{border-bottom:0}
.wg-steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--lift-hover);font-size:11px;font-weight:600;color:var(--mut)}
.wg-steps li:first-child b{background:var(--accent);box-shadow:none;color:var(--accent-ink)}
.wg-steps small{display:block;margin-top:1px;font-size:12px;color:var(--mut)}

/* apps/app/src/profile/nameBadge.css */
/* NameBadge marks keep their size beside a name that shrinks. .verified (styles.css) colours the ID seal. */
.verified,.age-badge{flex:none}
/* Age verified is --mut in every chat palette; only light and dark change it. */
.age-badge{display:inline-flex;align-items:center;color:var(--mut)}
.age-badge .icon,.age-badge-pill .icon{color:inherit}
/* As a button it keeps the glyph's size open or closed, so the line around it never moves. */
button.age-badge{position:relative;z-index:1;padding:0;border-radius:5px;transition:transform 120ms cubic-bezier(.23,1,.32,1)}
button.age-badge[aria-expanded=true]>.icon{visibility:hidden}
/* The open pill, shaped like .follows-you: 20px tall, a 14px glyph and 11px/600 text, on --lift over
   --floating so it stays readable over whatever it covers. AgeButton floats it over the glyph;
   data-below drops it under the glyph when the window has no room on the right. One finite 160ms fade
   and scale. */
.age-badge-pill{position:absolute;left:0;top:50%;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px 0 4px;border-radius:5px;color:var(--mut);background:linear-gradient(var(--lift),var(--lift)),var(--floating);box-shadow:0 1px 3px color-mix(in srgb,var(--tx) 16%,transparent);font:600 11px/1 system-ui,sans-serif;letter-spacing:0;white-space:nowrap;transform:translateY(-50%) scale(.92);transform-origin:left center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.age-badge-pill[data-below]{top:calc(100% + 4px);transform:scale(.92);transform-origin:right top}
button.age-badge[aria-expanded=true] .age-badge-pill{opacity:1;transform:translateY(-50%);pointer-events:auto}
button.age-badge[aria-expanded=true] .age-badge-pill[data-below]{transform:none}
button.age-badge:not([aria-expanded=true]) .age-badge-pill{visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility 0s .16s}
/* AgePill: the same pill held open in the flow. */
.age-badge-pill.is-inline{position:static;flex:none;transform:none;opacity:1}
/* The hit area: 32px tall and at least 32px wide, from the glyph rightwards so it never covers the name. */
button.age-badge::after{content:"";position:absolute;top:calc(50% - 16px);bottom:calc(50% - 16px);left:0;right:min(0px,calc(100% - 32px));border-radius:7px}
/* The app's accent ring hugging the badge: any offset would touch the name 3-5px before it. */
button.age-badge:focus-visible{outline-offset:0}
@media (prefers-reduced-motion:reduce){button.age-badge,.age-badge-pill{transition:none}}
/* Admin: the seal is the same red in every theme (set on the Icon, so surface icon rules can't grey it);
   the word takes --danger, which stays readable in dark. */
.admin-badge{display:inline-flex;align-items:center;gap:3px;flex:none;color:var(--danger);font:600 11px/1 system-ui,sans-serif;letter-spacing:0;white-space:nowrap}

/* apps/app/src/profile/page/profile-page.css */
/* Profile page (direction A on mockups/feed-chat-ultimate/profile.html). Shares the feed's surface
   (.feed-screen, .feed-button, .feed-icon, .feed-profile-tabs); everything new is pf-*. */

/* One scroller for the whole page, so nothing nests and nothing clips under the tabs. */
.pf-page{overflow:hidden}
.pf-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:calc(110px + var(--tabbar-space));position:relative}

/* Collapsed bar: sticky over the cover once the name scrolls away, the only place the name repeats.
   On sub profiles (no banner) it is always there for Back and options, with the name hidden until then. */
.pf-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;height:52px;padding:0 6px;background:var(--feed-bg);border-bottom:1px solid var(--feed-line);margin-bottom:-52px;visibility:hidden;opacity:0;transition:opacity 140ms ease,visibility 0s linear 140ms}
.pf-bar[data-shown=true]{visibility:visible;opacity:1;transition:opacity 140ms ease}
.pf-bar[data-always=true]{visibility:visible;opacity:1;margin-bottom:0;border-bottom-color:transparent}
.pf-bar[data-always=true][data-shown=true]{border-bottom-color:var(--feed-line)}
.pf-bar h2{font:700 16px/1.25 system-ui,sans-serif;letter-spacing:-.01em;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-bar .pf-bar-name{display:flex;align-items:center;gap:8px;flex:1;min-width:0;opacity:0;transition:opacity 140ms ease}
.pf-bar[data-shown=true] .pf-bar-name{opacity:1}
.pf-bar .avatar{width:28px;height:28px;font-size:11px}
.pf-bar .pf-spacer{flex:1}

/* Banner and the glass controls drawn over it (Back, options, settings). */
.pf-cover{position:relative;height:118px;background:var(--tone-a);overflow:hidden}
.pf-cover img{display:block;width:100%;height:100%;object-fit:cover}
.pf-cover-tools{position:absolute;inset:6px 8px auto;display:flex;justify-content:space-between;z-index:2}
.pf-cover-tools .pf-end{display:flex;gap:2px;margin-left:auto}
.pf-glass{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--tx);border:0;background:none;padding:0}
.pf-glass>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--glass);backdrop-filter:blur(12px);box-shadow:0 1px 3px #0000001a}
.pf-glass .icon{width:19px;height:19px}

/* Header */
.pf-head{padding:0 16px 12px;position:relative}
.pf-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:-34px;margin-bottom:10px}
.pf-avatar{display:block;flex:none;padding:0;border:0;border-radius:50%;background:none;cursor:zoom-in}
.pf-head-row>.avatar,.pf-avatar>.avatar{width:78px;height:78px;font-size:30px;border:3px solid var(--feed-bg);background-clip:padding-box;flex:none}
/* With a status dot the avatar loses its rounded corners (packages/ui styles.css), so its border would be
   square: the ring is drawn round on top instead. */
.pf-head-row>.avatar[data-presence],.pf-avatar>.avatar[data-presence]{border-color:transparent;background-clip:border-box}
.pf-head-row>.avatar[data-presence]::before,.pf-avatar>.avatar[data-presence]::before{content:'';position:absolute;inset:-3px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--feed-bg)}
.pf-head-row.flat{margin-top:16px;align-items:center}
.pf-head-row.flat>.avatar,.pf-head-row.flat>.pf-avatar>.avatar{border:0;width:68px;height:68px}
.pf-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pf-actions .feed-button{min-height:38px;padding:7px 15px;font-size:13px}
.pf-actions .feed-button .icon{width:17px;height:17px}
/* Following: the round unfollow check and round Message beside her profile button. */
.pf-actions .feed-button.pf-round{width:38px;padding:0;flex:none}
.pf-actions .pf-following{color:var(--mut)}
.pf-actions .pf-following .icon{width:18px;height:18px}
/* A brand mark on her profile button (ButtonMark), flat in the button's ink. Rasters are masked. */
.pf-button-mark{display:inline-grid;place-items:center;width:17px;height:17px;flex:none}
.pf-button-mark svg{width:100%;height:100%;fill:currentColor}
.pf-button-mark i{display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pf-button-mark b{font-size:10px;font-weight:750;letter-spacing:-.02em}
.pf-head h1{font-family:inherit;font-size:20px;font-weight:720;letter-spacing:-.025em;line-height:1.25;margin:0}
/* The ID badge or Age verified follows the name's last word, however the name wraps. */
.pf-head h1 :is(.verified,.age-badge,.admin-badge){margin-left:5px;vertical-align:-2px}
.pf-handle{font-size:13px;color:var(--mut);margin:1px 0 0}
.pf-tagline{font-size:14px;margin:8px 0 0;font-weight:550}
.pf-bio{font-size:14px;line-height:1.5;margin:4px 0 0;white-space:pre-line}
.pf-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:13px;color:var(--mut)}
.pf-meta span,.pf-meta a{display:inline-flex;align-items:center;gap:5px;min-height:24px}
.pf-meta .icon{width:15px;height:15px}
/* A meta line that always takes its own row, wherever the row before it ends ("Exclusive posts for"). */
.pf-meta .pf-meta-row{flex-basis:100%}
.pf-meta a{color:var(--accent);font-weight:550}
.pf-alert{font-size:12px;color:var(--danger);margin:8px 0 0}

/* Tabs stick under the bar; the underline is a fixed 40px centred, so it never moves. */
.pf-tabs{position:sticky;top:0;z-index:4;background:var(--feed-bg)}
.pf-page[data-bar=true] .pf-tabs{top:52px}
.pf-tabs.feed-profile-tabs a[aria-current=page]:after{left:calc(50% - 20px);right:auto;width:40px}

/* Audience pills for domme viewers: Everyone and Doms, plus My subs on her own profile. Labelled,
   never an icon that changes shape. */
.pf-audience{display:flex;gap:6px;padding:4px 13px;border-bottom:1px solid var(--feed-line)}
.pf-audience button{min-height:44px;display:flex;align-items:center;padding:0;border:0;background:none}
.pf-audience button>span{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 13px;border-radius:24px;border:1px solid var(--feed-line);font-size:12px;font-weight:650;color:var(--mut)}
.pf-audience button[aria-pressed=true]>span{background:var(--tx);color:var(--feed-bg);border-color:transparent}
.pf-audience .icon{width:13px;height:13px}

.pf-pinned{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:11px;font-weight:600;padding:10px 17px 0 27px;margin-bottom:-8px}
.pf-pinned .icon{width:14px;height:14px}
.pf-pinned+.feed-post{border-top:0}

/* About: a read-only document. */
.pf-doc{padding:4px 16px 12px}
.pf-doc>section{padding:16px 0;border-bottom:1px solid var(--feed-line)}
.pf-doc>section:last-child{border-bottom:0}
.pf-doc h2,.pf-doc .profile-media-heading h4{font:650 14px/1.3 system-ui,sans-serif;letter-spacing:0;margin:0 0 10px;color:var(--tx)}
.pf-doc p{font-size:14px;line-height:1.55;margin:0;white-space:pre-line}
.pf-doc .markdown{font-size:14px;line-height:1.55}
.pf-doc .profile-gallery{margin:0}
.pf-doc .profile-media-heading{display:block;margin:0}
.pf-doc .profile-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:10px;overflow:hidden}
.pf-doc .profile-photo-grid>button{display:block;aspect-ratio:1;padding:0;border:0;border-radius:0}
.pf-doc .profile-photo-grid .profile-photo{width:100%;height:100%;border-radius:0}
.pf-doc .profile-photo-grid img{width:100%;height:100%;object-fit:cover}
.pf-rules{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:rule}
.pf-rules li{counter-increment:rule;display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:14px;line-height:1.45;align-items:start}
.pf-rules li:before{content:counter(rule);width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--accent);font:600 11px/22px Sora,system-ui;text-align:center;margin-top:-1px}
.pf-limits{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pf-limits strong{display:block;font-size:12px;font-weight:650;color:var(--mut);margin-bottom:4px}
.pf-limits ul{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.7}
.pf-doc .pills .pill{font-size:12px;min-height:28px;padding:3px 10px;border-radius:24px}
.pf-doc .pills a.pill{color:var(--accent)}
.pf-doc-status{padding:28px 16px;font-size:14px;color:var(--mut)}
/* AboutSkeleton: a title block over text lines in each section. */
.pf-doc-loading>section{display:grid;gap:10px}

/* "With you": the shared native section (subs/WithYou), then her funded cards. The section element
   draws the bottom padding and divider like its siblings, so the cards sit above them; the RN
   section's own are cleared (its inline styles need !important). */
.pf-doc>section.pf-withyou{padding-top:0}
.pf-withyou>div:first-child{padding-bottom:0!important;border-bottom-width:0!important}

/* Options menu rows. */
.pf-options .flat-link .icon{width:20px;height:20px}

/* New domme's checklist, only she sees it. */
.pf-finish{margin:4px 16px 14px;border:1px solid var(--feed-line);border-radius:14px;padding:12px 6px 6px 14px;position:relative}
.pf-finish h2{font:650 14px/1.3 system-ui,sans-serif;letter-spacing:0;margin:2px 0 0}
.pf-finish>small{display:block;font-size:12px;color:var(--mut);margin-bottom:4px}
.pf-finish>.feed-icon{position:absolute;right:2px;top:0}
.pf-finish>.feed-icon .icon{width:18px;height:18px}
.pf-finish .flat-link{padding:10px 8px 10px 0;min-height:46px;font-size:14px;gap:11px;color:var(--tx)}
.pf-finish .flat-link>.icon:first-child{width:19px;height:19px;color:var(--accent)}
.pf-finish .flat-link .tail.icon{width:16px;height:16px}

/* Empty Posts */
.pf-empty{padding:22px 16px 24px;display:grid;gap:6px;justify-items:start}
.pf-empty p{font-size:14px;color:var(--mut);margin:0}
.pf-empty .feed-button{margin-top:8px}
.pf-empty .feed-button .icon{width:17px;height:17px}

@media (min-width:761px){
  .pf-cover{height:150px}
  .pf-head{padding-inline:20px}
  .pf-head-row>.avatar,.pf-avatar>.avatar{width:96px;height:96px;font-size:36px}
  .pf-head-row>.avatar,.pf-avatar{margin-top:-6px}
  .pf-phone-only{display:none}
  .pf-scroll{padding-bottom:40px}
}
@media (hover:hover) and (pointer:fine){
  .pf-finish .flat-link:hover{background:var(--lift)}
  .pf-audience button:hover>span{border-color:var(--lift-hover)}
}
/* Another domme viewing a domme who follows her. */
.pf-handle .follows-you{display:inline-flex;align-items:center;height:20px;margin-left:6px;padding:0 7px;border-radius:5px;background:var(--lift);color:var(--mut);font-size:11px;font-weight:600;vertical-align:1px}
.pf-handle .presence-pill{display:inline-flex;align-items:center;gap:5px;height:20px;margin-left:6px;padding:0 7px;border-radius:5px;background:var(--lift);color:var(--mut);font-size:11px;font-weight:600;vertical-align:1px}
.pf-handle .presence-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--online)}
.pf-handle .presence-pill[data-presence=away]::before{background:var(--away)}

/* apps/app/src/activity/activity.css */
/* Activity: the list page, its rows (also in the desktop feed column) and the feed bar bell. */

/* ---------- Rows ---------- */
.act-list { display: flex; flex-direction: column; }
.act-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 13px 16px 13px 14px; border-bottom: 1px solid var(--feed-line); }
.act-item[data-unread] { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.act-item[data-link] { cursor: pointer; }
/* The face, with a corner badge naming the kind of event. */
.act-face { position: relative; display: block; width: 34px; height: 34px; }
.act-face .avatar { width: 34px; height: 34px; font-size: 13px; }
.act-kind { position: absolute; right: -5px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--feed-bg); }
.act-kind .icon { width: 11px; height: 11px; stroke-width: 2.2; }
.act-kind[data-kind='post_heart'] .icon, .act-kind[data-kind='comment_heart'] .icon { fill: currentColor; }
.act-kind[data-kind='tag_approved'] { background: var(--success); color: var(--success-ink, #fff); }
.act-main { min-width: 0; }
.act-skeleton { display: grid; gap: 8px; align-content: center; }
.act-text { position: relative; margin: 0; padding-right: 14px; font-size: 13px; line-height: 1.45; color: var(--tx); }
.act-text strong { font-weight: 700; }
.act-text a { color: inherit; }
.act-text time { color: var(--mut); font-size: 12px; white-space: nowrap; }
.act-text time:before { content: '· '; }
.act-text .unread { position: absolute; right: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.act-faces { display: flex; margin: 6px 0 1px; }
.act-faces .avatar { width: 22px; height: 22px; font-size: 9px; margin-right: -5px; box-shadow: 0 0 0 2px var(--feed-bg); }
.act-quote { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.act-quote.strong { color: var(--tx); }
.act-actions { display: flex; gap: 8px; margin-top: 9px; }
.act-actions .feed-button { min-height: 36px; padding: 6px 16px; font-size: 12px; }
/* The post a request is about, shrunk: enough to recognise it before opening. */
.act-preview { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; margin-top: 9px; padding: 10px 12px; border: 1px solid var(--feed-line); border-radius: 14px; background: var(--feed-bg); }
.act-preview .avatar { width: 24px; height: 24px; font-size: 10px; }
.act-preview p { margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.act-preview-top strong, .act-preview-top b { font-weight: 700; }
.act-preview-top span { color: var(--mut); font-size: 12px; }
.act-preview-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Page ---------- */
.act-screen .act-scroll { padding-bottom: calc(40px + var(--tabbar-space)); }
.act-status { padding: 18px 16px; font-size: 13px; color: var(--mut); }
.act-empty { display: grid; justify-items: start; gap: 10px; padding: 36px 20px; }
.act-empty h2 { margin: 0; font: 650 20px/1.3 system-ui, sans-serif; letter-spacing: -0.01em; }
.act-empty p { margin: 0; color: var(--mut); font-size: 13px; }
.act-empty .feed-button { margin-top: 6px; }
.act-empty .feed-button .icon { width: 17px; height: 17px; }
.act-more { height: 1px; }

/* ---------- Bell ---------- */
.activity-bell { position: relative; flex: none; align-self: center; color: var(--tx); }
.activity-bell .nav-badge { top: 5px; left: 24px; box-shadow: 0 0 0 2px var(--feed-bg, var(--field)); }

/* ---------- Badges (bell, tab bar, sidebar) ---------- */
.tab-icon { position: relative; display: inline-grid; place-items: center; }
.nav-badge { position: absolute; top: -6px; left: calc(100% - 9px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 650 10px/17px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--field); pointer-events: none; }
.tabbar .nav-badge { box-shadow: 0 0 0 2px var(--glass); }

/* Desktop has the sidebar's Activity row instead of the feed bar bell. */
@media (min-width: 900px) {
  .desktop-app .activity-bell { display: none; }
}

/* apps/app/src/sensitivePhotos/sensitive-photos.css */
.sensitive-photo{position:relative;display:block;width:100%;height:100%;min-width:0;overflow:hidden;isolation:isolate;border-radius:inherit}
.sensitive-photo>img{display:block}
.sensitive-photo.is-covered>img{filter:blur(24px);clip-path:inset(0);pointer-events:none;user-select:none}
.sensitive-photo .sensitive-photo-open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.sensitive-photo .sensitive-photo-reveal{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:8px;border:0;background:#21192933;color:#fff;cursor:pointer}
.sensitive-photo-label{display:flex;align-items:center;gap:8px;padding:12px 17px;border-radius:28px;background:#211b2bf2;color:#fff;font:13px/1.4 system-ui,sans-serif;text-align:left}
.sensitive-photo-label>span{display:flex;flex-direction:column;gap:2px}
.sensitive-photo-label strong{font-size:13px;font-weight:650;color:inherit}
.sensitive-photo-label small{font-size:12px;font-weight:400;color:#e1dbe8}
.sensitive-photo .sensitive-photo-hide{position:absolute;top:8px;right:8px;z-index:2;min-height:44px;padding:10px 14px;border:0;border-radius:24px;background:#211b2bf2;color:#fff;font-size:12px;cursor:pointer}
.sensitive-photo button:focus-visible{outline:2px solid #c5a6ef;outline-offset:-3px}
.sensitive-photo.is-compact .sensitive-photo-label{padding:8px;min-height:44px;min-width:44px;justify-content:center}
.sensitive-photo.is-compact .sensitive-photo-label>span{display:none}
.shared-message-photo:has(.sensitive-photo.is-covered)>.shared-message-open{pointer-events:none;visibility:hidden}
.shared-media-frame>.sensitive-photo>img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.feed-photos>.sensitive-photo{height:auto}

.shared-message-photo>.sensitive-photo{z-index:1;pointer-events:none}
.shared-message-photo>.sensitive-photo button{pointer-events:auto}
.shared-media-tile .shared-duration{pointer-events:none}

/* apps/app/src/chatMedia/voice-note.css */
.voice-note{display:flex;align-items:center;gap:12px;width:100%;min-width:0;min-height:78px;padding:12px;color:var(--accent);box-sizing:border-box}
.voice-note-play{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;touch-action:manipulation}
.voice-note-play .icon{fill:currentColor;stroke-width:1.3}
.voice-note-retry{font-size:11px;font-weight:600}
.voice-note[data-playing=false] .voice-note-play .icon{transform:translateX(1px)}
.voice-note-play:active:not(:disabled){transform:scale(.97)}
.voice-note-play:disabled{opacity:.45;cursor:default}
.voice-note-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.voice-note-track{flex:1;min-width:0}
.voice-note-seek{position:relative;height:36px}
.voice-note-bars{display:flex;align-items:center;gap:3px;height:100%;overflow:hidden}
.voice-note-bars i{display:block;flex:1;min-width:1px;max-width:4px;border-radius:4px;background:var(--accent);opacity:.6}
.voice-note-bars i[data-played=true]{opacity:1}
.voice-note-seek input{position:absolute;inset:-4px 0;width:100%;height:44px;margin:0;opacity:0;cursor:pointer;touch-action:pan-y}
.voice-note-seek input:disabled{cursor:default}
.voice-note-seek:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.voice-note-times{display:flex;justify-content:space-between;gap:8px;margin-top:6px;min-height:12px;line-height:1.2;font-size:11px;font-variant-numeric:tabular-nums;color:var(--mut)}
.voice-note-elapsed{color:var(--accent);font-weight:550}
.voice-note-elapsed>.skeleton{margin:2px 0 1px}
@media(hover:hover){.voice-note-play:hover:not(:disabled){filter:brightness(1.08)}}
@media(prefers-reduced-motion:reduce){.voice-note-play:active:not(:disabled){transform:none}}

/* apps/app/src/discover/discover.css */
/* Portrait placeholder until profiles carry photos: the domme avatar gradient with the initial. */
.portrait{display:grid;place-items:center;background:linear-gradient(135deg,var(--tone-a),var(--tone-b));font-family:Sora,system-ui,sans-serif;font-size:40px;font-weight:600;color:var(--tx)}

/* Domme directory: the sub view of Discover (DommeDirectory.web.tsx) and dote.gg/discover
   (packages/ui/src/discoverPage.ts) share this markup. Search, a bar of dropdown chips (Tags, Country,
   Sort) and popular tags, then cover cards. On phones the bar scrolls and a dropdown spans the bar;
   from 900px it wraps and each dropdown opens under its chip. */
.discovery-phone{--dd-surface:#fff}
[data-theme=dark] .discovery-phone{--dd-surface:var(--doc)}
/* minmax(0,1fr): without it the column grows to the scrolling bar's full width on phones. */
.dd-toolbar{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.dd-bar{position:relative}
.dd-filters{display:flex;gap:8px;overflow-x:auto;margin:0 calc(var(--screen-gutter) * -1);padding:0 var(--screen-gutter) 2px;scrollbar-width:none}
.dd-filters>*{flex:none}
.dd-drop>summary{list-style:none;cursor:pointer}
.dd-drop>summary::-webkit-details-marker{display:none}
.dd-drop>summary .icon{width:14px;height:14px;margin-right:-4px}
.dd-drop[open]>summary .icon{transform:rotate(180deg)}
.dd-sep{width:1px;margin:6px 2px;background:var(--lift-hover)}
.dd-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;display:grid;gap:6px;max-height:min(60vh,420px);overflow:auto;overscroll-behavior:contain;padding:10px 12px;border:1px solid var(--lift-hover);border-radius:14px;background:var(--dd-surface);box-shadow:var(--shadow);font-size:13px;color:var(--tx)}
.dd-panel .field{min-height:38px;margin:0;padding:0 10px;background:var(--lift)}
.dd-panel .field input{padding:6px 0;font-size:13px}
.dd-options{display:grid;margin:0;padding:0;list-style:none}
.dd-options label{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer}
.dd-options input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.dd-n{margin-left:auto;font-size:12px;color:var(--mut)}
.dd-applied{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dd-body{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:14px;padding:4px var(--screen-gutter) calc(24px + var(--tabbar-space));scrollbar-width:none}
.dd-body>.button{justify-self:center}
.dd-body>.plain-status{justify-self:center}
.dd-count{font-size:13px;font-weight:600;color:var(--mut)}
.dd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
/* The whole card opens her profile (the name's link stretches over it); pills, badges and Message sit above. */
.dd-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--lift-hover);border-radius:var(--card-radius);background:var(--dd-surface)}
.dd-cover{position:relative;display:block;height:96px;overflow:hidden;background:var(--tone-a)}
.dd-cover img{width:100%;height:100%;object-fit:cover}
.dd-card-body{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;padding:0 16px 16px}
/* Scoped to the card so it outranks the global .avatar size wherever the bundle puts this file. */
.dd-card .dd-face{width:72px;height:72px;margin-top:-36px;font-size:26px;box-shadow:0 0 0 4px var(--dd-surface)}
.dd-card .dd-face img{width:100%;height:100%;object-fit:cover}
.dd-card h3{display:flex;align-items:center;min-width:0;margin-top:8px;font-size:17px;font-weight:600;line-height:1.3}
/* Name and seal never wrap apart; a long name ellipsizes and the seal stays. */
.dd-title{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.dd-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-name:after{content:'';position:absolute;inset:0}
.dd-handle{overflow:hidden;font-size:12px;color:var(--mut);text-overflow:ellipsis;white-space:nowrap}
.dd-line{display:-webkit-box;margin-top:6px;overflow:hidden;font-size:13.5px;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dd-where{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:12px;color:var(--mut)}
.dd-where .icon{flex:none;width:14px;height:14px}
.dd-card .pills{margin-top:10px}
.dd-card .pills,.dd-card .verified,.dd-card .admin-badge,.dd-act{position:relative;z-index:1}
.dd-act{margin-top:auto;padding-top:16px}
.dd-act .button{border-radius:22px}
@media(hover:hover){.dd-card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--lift-hover))}}
.dd-empty{display:grid;gap:12px;justify-items:start;padding:34px 0}
.dd-empty h2{font-size:22px;font-weight:600}
.dd-empty p{color:var(--mut)}
@media(min-width:900px){
  .dd-filters{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .dd-bar{position:static}
  .dd-drop{position:relative}
  .dd-panel{right:auto;width:280px}
  .dd-drop[data-drop=sort] .dd-panel{width:200px}
  .dd-body{padding:0 32px 32px}
  .desktop-app[data-page=discover] .desktop-route .tab-shell:has(.dd-body){max-width:1120px}
}
/* Loading rows and cards: the portrait and face keep their size in the skeleton colour, and nothing in them is a target. */
.dd-loading,.discovery-loading{pointer-events:none}
.discovery-loading .portrait,.dd-loading .dd-face{background:var(--lift)}
.dd-loading .dd-cover{background:var(--lift)}
.dd-loading .dd-card-body{gap:8px}
/* display: contents keeps the sub directory's rows in the desktop two column grid. */
.discovery-loading{display:contents}
/* Sub directory: the name link and Age verified are one group before the pronouns, so a long name
   ellipsizes and the badge stays. The badge sits above the card's stretched link, as Message does. */
.discovery-title{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}

/* Tag lookup feedback remains visible when no options match. */
.dd-tag-status:not(:empty){padding:10px 4px;color:var(--mut);font-size:13px}
.dd-tag-status .button{min-height:36px}