/* Shared reading sizes keep captions and calendar controls in the same type family as posts. */
.agenda-label,.calendar-heading .month-picker strong,.world-foot,.minor-heading a,.source-note,
.inline-status,.discovery-card .cal-agenda p,.tool-caption,.map-popup-list small,.event-time,
.scope-controls label,.map-date-controls label,.feed-post-header small,.stories-rail small{
  font-family:Archivo,Arial,sans-serif;letter-spacing:normal;text-transform:none;line-height:1.45
}
.agenda-label{font-size:14px;font-weight:500;margin:0 0 6px}.agenda-label span:empty{display:none}
.month-picker strong{font-size:16px}.cal-agenda p,.agenda-event small,.map-popup-list small,.minor-heading a,.inline-status,.tool-caption{font-size:12px}
.cal-agenda p{margin:8px 0 4px}.agenda-event{min-height:45px}.calendar-days>span{font:500 12px/1.45 Archivo,Arial,sans-serif}
.event-date strong,.map-num,.cal-day{font-variant-numeric:tabular-nums}.calendar-days .cal-day{font-size:13px}
.settings-grid#appearance{display:block}.theme-panel{width:100%;max-width:none}.theme-panel h2,.account-spread .panel h2,.watch-offer h2{font:600 clamp(20px,2.1vw,29px)/1.15 Archivo,Arial,sans-serif;letter-spacing:-.045em;margin:0 0 16px}
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mode-option{display:grid;grid-template-rows:auto auto 1fr;gap:6px;min-width:0;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:12px;color:var(--ink)}
.mode-option:hover,.mode-option[aria-pressed=true]{border-color:var(--ink)}.mode-option[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--ink)}
.mode-option>strong{font:600 16px/1.25 Archivo,Arial,sans-serif;letter-spacing:-.02em}.mode-option>span:last-child{font-size:13px;color:var(--muted)}
.mode-sample{display:grid;align-content:end;justify-items:start;gap:5px;height:54px;padding:9px;background:#f6f6f3;border:1px solid #c6c6c2;border-radius:4px;color:#181818}
.mode-sample i,.mode-sample b{display:block;height:4px;border-radius:2px;background:currentColor;width:51%}.mode-sample b{width:26%;opacity:.54}
.sample-night{background:#1a1a1a;color:#f6f6f3;border-color:#484848}.sample-accent i{background:var(--sample-hue);border:1px solid #0004;height:8px}
.colour-controls,.colour-controls label,.colour-swatches{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.colour-controls{justify-content:space-between;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.colour-controls label{font-size:14px}.colour-controls input{width:48px;height:35px;padding:2px;border:1px solid var(--line);background:var(--bg);border-radius:4px}
.colour-swatches{gap:7px}.colour-swatches button{background:var(--swatch);width:27px;height:27px;border-radius:50%;border:1px solid #0004}.colour-swatches button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}
html[data-mode=accent] :is(.btn.primary,.chip.active,.save-btn.saved){color:var(--accent-ink);background:var(--accent);border-color:var(--accent-edge)}
html[data-mode=accent] .btn.primary:hover{opacity:1;box-shadow:inset 0 0 0 1px var(--accent-edge)}
html[data-mode=accent] .seq-cell:first-child .seq-logo{color:var(--accent-edge)}
html[data-mode=accent] .seq-cell:hover .seq-logo{color:var(--accent-edge)}
html[data-mode=accent] header nav a[aria-current=page]:after{background:var(--accent-edge)}
html :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent-edge);outline-offset:2px}
html[data-mode=night] .leaflet-popup-content-wrapper,html[data-mode=night] .leaflet-popup-tip{background:var(--bg);color:var(--ink)}
.display-placement:not([hidden]){padding-block:16px;margin:0;border:0;border-bottom:1px solid var(--line)}
#mobile-nav a{font-size:11px}#header .header-account{font-size:13px}.scope-controls label,.minor-heading a{font-size:12px}
.account-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0 clamp(16px,5vw,80px) clamp(30px,5vw,72px);max-width:1250px;margin:auto}
.account-spread .panel,.watch-offer{padding:clamp(17px,2.4vw,30px);border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-width:0}
.account-spread .panel p,.watch-offer p{color:var(--muted);font:400 15px/1.55 Archivo,Arial,sans-serif;max-width:62ch;margin:10px 0 15px}
.account-spread .panel h3{font-size:19px;letter-spacing:-.025em;margin:20px 0 8px}
.account-spread .panel .btn,.watch-offer .btn{min-height:42px}.account-spread .nkt-balance{font:500 clamp(40px,6vw,74px)/1 var(--date-face);letter-spacing:-.06em}
.nkt-balance small{font:500 17px/1 Archivo,Arial,sans-serif;letter-spacing:0;color:var(--muted)}
.account-spread .panel .status-copy{font-size:13px;margin-bottom:0}.account-spread .field{margin:12px 0}.account-spread .field select{width:100%;min-width:0}
.ledger{grid-column:1/-1}.ledger ul{padding:0;margin:0}.ledger li{list-style:none;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:10px 0;gap:12px}.ledger small{display:block;color:var(--muted);margin-top:3px}
.watch-offer{width:min(440px,calc(100vw - 32px))}.watch-offer::backdrop{background:#0009}.watch-offer .actions{justify-content:flex-end}
.display-choice{grid-auto-flow:column;justify-content:center;font-size:14px}.display-choice .btn{min-height:34px;padding:6px 11px}.display-choice .actions{gap:6px}@media(max-width:550px){.display-choice{grid-auto-flow:row}}.display-placement[hidden]{display:none}.display-placement{display:grid;place-items:center;gap:6px;margin:24px 0 0;border-top:1px solid var(--line);padding:14px 0 0;color:var(--muted);text-align:center;position:static}.display-placement>small{font:12px/1.4 Archivo,Arial,sans-serif}
.report-link{color:var(--muted);text-decoration:underline;text-underline-offset:3px;font:12px/1.4 Archivo,Arial,sans-serif}.feed-post-actions .report-link{margin-left:auto}.feed-post-actions{flex-wrap:wrap}
.sponsor-label{display:inline-block;vertical-align:middle;font:600 11px/1.3 Archivo,Arial,sans-serif;letter-spacing:.01em;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:2px 6px;margin:0 6px 4px 0}
.event-row.is-sponsored,.feed-post.is-sponsored,.map-row.is-sponsored{background:var(--soft)}.map-row.is-sponsored .sponsor-label{display:table}.pin-cluster.promoted-pin{background:#626262;color:#fff;box-shadow:0 0 0 2px #eee}
footer .links{flex-wrap:wrap;row-gap:8px}footer .links a,footer .links button{min-height:32px;display:inline-flex;align-items:center}
@media(max-width:680px){.account-spread{grid-template-columns:minmax(0,1fr);padding-inline:16px;gap:10px}.mode-grid{gap:6px}.mode-option{padding:9px}.mode-option>span:last-child{font-size:12px}.mode-sample{height:44px}.settings-grid#appearance{padding-inline:15px}.theme-panel{padding:14px}.agenda-event small{font-size:12px}footer .links{justify-content:flex-end}}
@media(max-width:370px){.mode-grid{grid-template-columns:1fr}.mode-option{grid-template:1fr 1fr / 56px 1fr;column-gap:11px;row-gap:0}.mode-sample{grid-row:1/3}.mode-option>strong{align-self:end}.mode-option>span:last-child{align-self:start}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  #footer .brand:hover .logo-mark{animation:logo-hover-spin 6s linear infinite}
}
html[data-mode=accent] .logo-mark{color:var(--accent-edge)}
html[data-mode=accent] :is(#header,#footer) .brand .logo-mark,
html[data-mode=accent] .seq-cell:nth-child(2) .seq-logo{color:var(--accent);stroke:var(--accent-edge);stroke-width:1.1;paint-order:stroke fill}
html[data-mode=accent] .seq-cell:not(:nth-child(2)) .seq-logo,html[data-mode=accent] .seq-cell:not(:nth-child(2)):is(:hover,:focus-visible) .seq-logo{color:var(--accent-edge)}
html[data-mode=accent] .seq .seq-cell:is(:hover,:focus-visible){background:var(--soft);color:var(--ink)}
html[data-mode=accent] :is(button,.btn,.icon-btn,.text-link,.header-account,.filter-label,.audience-select){color:var(--accent-edge);border-color:var(--accent-edge)}
html[data-mode=accent] #mobile-nav a.active{color:var(--accent-edge);border-color:var(--accent-edge)}
html[data-mode=accent] :is(.btn.primary,.chip.active,button[aria-pressed=true],button[aria-selected=true],.header-account,.account-avatar,.avatar,.pin-cluster,.call-controls button,.media-play,.story-screen button,.story-screen .actions button){background:var(--accent);color:var(--accent-ink);border-color:var(--accent-edge)}
html[data-mode=accent] button[data-swatch]{background:var(--swatch)}
html[data-mode=accent] :is(input,select,textarea){accent-color:var(--accent-edge)}
html[data-mode=accent] :is(.feed-tabs,.cal-day,.chat-row) button:focus-visible{outline-color:var(--accent-edge)}
html[data-mode=night] :is(body,#header,#footer,#mobile-nav,.panel,.event-date,.map-sidebar,.chat-row,.feed-post,.social-stories,.call-person,.discovery-card,.world-card,.studio-tools,.share-tools,.modal-close,dialog,.mode-option,.more-map-filters,.social-composer,.settings-grid,.is-sponsored){background-color:#000}
html[data-mode=night] .is-sponsored{border-inline-start:2px solid white}


/* Accent mode: every Noktura mark takes the chosen accent; a mark sitting on an accent fill uses the accent's ink so it stays visible. */
html[data-mode=accent] :is(.logo-mark,.sec-glyph,.eyebrow-mark,.seq-logo){color:var(--accent-edge)}
html[data-mode=accent] :is(.btn.primary,.chip.active,button[aria-pressed=true],button[aria-selected=true],.account-avatar,.avatar,.pin-cluster,.media-play,.spine-marker) .logo-mark{color:var(--accent-ink)}
/* Account button: on the accent fill the name and arrow use the accent's ink (black on every light or mid accent). */
html[data-mode=accent] #header button.header-account[data-action]{background:var(--accent);border-color:var(--accent-edge);color:var(--accent-ink)}
html[data-mode=accent] #header button.header-account[data-action] :is(.account-name,.icon,svg){color:var(--accent-ink)}
html[data-mode=accent] #header button.header-account[data-action] .account-avatar{background:var(--accent-ink);color:var(--accent)}
html[data-mode=accent] #header button.header-account[data-action]:hover{box-shadow:inset 0 0 0 1px var(--accent-ink)}
/* Feed / Reels: underline only, as in the default edition. */
html[data-mode=accent] #main .feed-tabs button[role=tab]{background:none;border-color:transparent;color:var(--muted)}
html[data-mode=accent] #main .feed-tabs button[role=tab]:is(:hover,:focus-visible){background:none;color:var(--muted);border-bottom-color:var(--accent-edge)}
html[data-mode=accent] #main .feed-tabs button[role=tab][aria-selected=true]{background:none;color:var(--accent-edge);border-bottom-color:var(--accent-edge)}
/* Hover on outlined buttons: fill with the accent and use its ink, so the label never matches the fill. */
html[data-mode=accent] :is(.btn,.icon-btn):not(.primary):is(:hover,:focus-visible){background:var(--accent);color:var(--accent-ink);border-color:var(--accent-edge)}
html[data-mode=accent] :is(.btn,.icon-btn):not(.primary):is(:hover,:focus-visible) :is(svg,span){color:var(--accent-ink)}
/* Calendar numbers use the interface face with tabular figures, matching the month and agenda type. */
.calendar-days .cal-day{font-family:Archivo,Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;font-size:13px;font-weight:500;line-height:1}
.calendar-days .cal-day.has-events{font-weight:500}
/* Messages welcome: one centred column, button sits on the same axis as the mark and heading. */
.chat-main .chat-welcome{display:flex;flex-direction:column;align-items:center;text-align:center}
.chat-main .chat-welcome p{margin:16px auto 30px}
.chat-main .chat-welcome .btn{align-self:center;min-width:240px}
.call-person .relay-video{grid-area:1/1;width:100%;height:100px;object-fit:cover;position:relative;z-index:1;background:#000}
.call-person.relay-live video[id^=remote]{opacity:0}
/* One shade for every mark: all logos use the same --logo colour (the accent itself, or its readable edge when the
   accent is almost the page colour), with no outline variants. */
html[data-mode=accent] :is(.logo-mark,.sec-glyph,.eyebrow-mark,.seq-logo,.mast-logo,.axis-logo,.pattern-logo,.quad-logo,.crop-logo,.diamond-logo),
html[data-mode=accent] .seq-cell:is(:nth-child(n)):is(:hover,:focus-visible,:not(:hover)) .seq-logo,
html[data-mode=accent] :is(#header,#footer) .brand .logo-mark{color:var(--logo,var(--accent));stroke:none;fill:currentColor}
html[data-mode=accent] :is(.btn.primary,.chip.active,button[aria-pressed=true],button[aria-selected=true],.account-avatar,.avatar,.pin-cluster,.media-play,.spine-marker) .logo-mark{color:var(--accent-ink)}
/* Tabs everywhere (People, Feed / Reels and any other tab row): no filled buttons, only the underline marks hover
   and selection, in every mode and accent. */
html :is(#main,#modal) [role=tablist] button[role=tab]{background:none!important;box-shadow:none;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;border-bottom:2px solid transparent;color:var(--muted)}
html :is(#main,#modal) [role=tablist] button[role=tab]:is(:hover,:focus-visible){background:none!important;border-bottom-color:var(--line);color:var(--ink)}
html :is(#main,#modal) [role=tablist] button[role=tab][aria-selected=true]{background:none!important;border-bottom-color:var(--ink);color:var(--ink)}
html[data-mode=accent] :is(#main,#modal) [role=tablist] button[role=tab]:is(:hover,:focus-visible){border-bottom-color:var(--accent-edge);color:var(--ink)}
html[data-mode=accent] :is(#main,#modal) [role=tablist] button[role=tab][aria-selected=true]{border-bottom-color:var(--accent-edge);color:var(--accent-edge)}
/* Voice activity: a ring that breathes with each speaker's voice, in ink (or the accent in accent mode). */
.call-person{--level:0;--ring:var(--ink);box-shadow:inset 0 0 0 calc(var(--level) * 3px) var(--ring);transition:box-shadow .08s linear}
html[data-mode=accent] .call-person{--ring:var(--accent-edge)}
.call-person .avatar{position:relative;z-index:0;box-shadow:0 0 0 calc(2px + var(--level) * 9px) color-mix(in srgb,var(--ring) calc(var(--level) * 38%),transparent)}
.call-person .avatar::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--ring);opacity:calc(var(--level) * 1.3);transform:scale(calc(1 + var(--level) * .45));pointer-events:none}
@media(prefers-reduced-motion:reduce){.call-person .avatar::after{transform:none}}
/* Readable type pass: numbers use the interface face (no monospace), and captions never drop below 11px. */
:root{--date-face:Archivo,Arial,sans-serif;--mono:Archivo,Arial,sans-serif}
html body :is(.event-date strong,.map-row .map-num,.event-date-panel>strong,.cal-day,.event-time):not(#nk){font-family:Archivo,Arial,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
html body :is(small,.event-category,.event-time,.filter-label,.photo-picker,.video-hint,.map-note,.stories-caption,.report-link,.account-name):not(#nk){font-size:11.5px}
html body :is(.event-date small,.event-date span):not(#nk){font-size:11px}
html body .eyebrow:not(#nk){font-size:max(11px,.8em)}
html body :is(.account-avatar,.suggested-person .avatar,.composer-main .avatar):not(#nk){font-size:10.5px}
html body .profile-summary .text-link:not(#nk){font-size:11.5px}
html body .story-add strong:not(#nk){font-size:11px}
@media(max-width:650px){html body :is(.btn,.text-link,.chip,.links a,.links button,.feed-post-actions button):not(#nk){font-size:12px}}
/* Date range: a field-like button and a calendar sheet that match the rest of the filters. */
.date-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:44px;padding:0 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer;min-width:0}
.date-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-pick svg{width:16px;height:16px;flex:none;opacity:.7}
.date-pick:hover,.date-pick:focus-visible{border-color:var(--ink)}
.date-pick.is-set{border-color:var(--ink)}
.scope-controls .date-pick{height:38px;border-radius:4px;font-size:12px;padding:0 9px}
html[data-mode=accent] .date-pick{color:var(--ink);border-color:var(--line)}
html[data-mode=accent] .date-pick:is(:hover,:focus-visible,.is-set){border-color:var(--accent-edge)}
.dp-quick{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.dp-chip{padding:8px 13px;border:1px solid var(--line);font-size:12px;background:var(--bg);color:var(--ink)}
.dp-chip:hover{border-color:var(--ink)}
.dp-chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-mode=accent] .dp-chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-edge)}
.dp-cal{border-top:1px solid var(--line);padding-top:12px}
.dp-cal .calendar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-cal .calendar-heading strong{font-weight:500;font-size:15px}
.dp-cal .calendar-heading button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;font-size:18px;display:grid;place-items:center}
.dp-cal .calendar-heading button:disabled{opacity:.3}
.dp-cal .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dp-cal .calendar-days span{font-size:11px;color:var(--muted);padding:6px 0}
.dp-cal .dp-day{height:40px;max-width:none;border-radius:0}
.dp-cal .dp-day:disabled{color:var(--line);cursor:default}
.dp-cal .dp-day.in-range{background:var(--soft)}
.dp-cal .dp-day.is-edge{background:var(--ink);color:var(--bg)}
html[data-mode=accent] .dp-cal .dp-day.is-edge{background:var(--accent);color:var(--accent-ink)}
.dp-cal .dp-day.has-events::after{display:none}
.dp-summary{margin:14px 0 4px;font-size:13px;color:var(--muted)}
.dp-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
/* Events filters with one Dates field: search · city · sort · dates. */
.event-filters.has-dates{grid-template-columns:minmax(220px,2fr) repeat(3,minmax(140px,1fr))}
.event-filters.has-dates>*{grid-row:auto!important;grid-column:auto!important}
@media(max-width:1100px){.event-filters.has-dates{grid-template-columns:repeat(3,minmax(0,1fr))}.event-filters.has-dates .search-box{grid-column:1/-1!important}}
@media(max-width:650px){.event-filters.has-dates{grid-template-columns:repeat(2,minmax(0,1fr))}.event-filters.has-dates>.filter-label:last-child{grid-column:1/-1!important}}
.map-date-controls .filter-label:last-child{grid-column:1/-1}
/* Date range: a field-like button and a calendar sheet that match the rest of the filters. */
.date-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:44px;padding:0 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer;min-width:0}
.date-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-pick svg{width:16px;height:16px;flex:none;opacity:.7}
.date-pick:hover,.date-pick:focus-visible{border-color:var(--ink)}
.date-pick.is-set{border-color:var(--ink)}
.scope-controls .date-pick{height:38px;border-radius:4px;font-size:12px;padding:0 9px}
html[data-mode=accent] .date-pick{color:var(--ink);border-color:var(--line)}
html[data-mode=accent] .date-pick:is(:hover,:focus-visible,.is-set){border-color:var(--accent-edge)}
.dp-quick{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.dp-chip{padding:8px 13px;border:1px solid var(--line);font-size:12px;background:var(--bg);color:var(--ink)}
.dp-chip:hover{border-color:var(--ink)}
.dp-chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-mode=accent] .dp-chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-edge)}
.dp-cal{border-top:1px solid var(--line);padding-top:12px}
.dp-cal .calendar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-cal .calendar-heading strong{font-weight:500;font-size:15px}
.dp-cal .calendar-heading button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;font-size:18px;display:grid;place-items:center}
.dp-cal .calendar-heading button:disabled{opacity:.3}
.dp-cal .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dp-cal .calendar-days span{font-size:11px;color:var(--muted);padding:6px 0}
.dp-cal .dp-day{height:40px;max-width:none;border-radius:0}
.dp-cal .dp-day:disabled{color:var(--line);cursor:default}
.dp-cal .dp-day.in-range{background:var(--soft)}
.dp-cal .dp-day.is-edge{background:var(--ink);color:var(--bg)}
html[data-mode=accent] .dp-cal .dp-day.is-edge{background:var(--accent);color:var(--accent-ink)}
.dp-summary{margin:14px 0 4px;font-size:13px;color:var(--muted)}
.dp-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
/* Events filters with one Dates field: search · city · sort · dates. */
.event-filters.has-dates{grid-template-columns:minmax(220px,2fr) repeat(3,minmax(140px,1fr))}
.event-filters.has-dates>*{grid-row:auto!important;grid-column:auto!important}
@media(max-width:1100px){.event-filters.has-dates{grid-template-columns:repeat(3,minmax(0,1fr))}.event-filters.has-dates .search-box{grid-column:1/-1!important}}
@media(max-width:650px){.event-filters.has-dates{grid-template-columns:repeat(2,minmax(0,1fr))}.event-filters.has-dates>.filter-label:last-child{grid-column:1/-1!important}}
.map-date-controls .filter-label:last-child{grid-column:1/-1}
/* Profile pictures fill the round avatar everywhere. */
:is(.avatar,.account-avatar,.story-add>span,.story-person>span){overflow:hidden;position:relative}
.avatar-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.anon-avatar{display:grid;place-items:center;background:var(--soft);color:var(--ink)}
.anon-avatar .logo-mark{width:58%;height:58%;color:var(--ink)}
html[data-mode=accent] .anon-avatar{background:var(--soft)}
html[data-mode=accent] .anon-avatar .logo-mark{color:var(--logo,var(--accent))}
.composer-anon{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);cursor:pointer;margin-left:auto;white-space:nowrap}
.composer-anon input{width:15px;height:15px;accent-color:var(--ink);margin:0}
html[data-mode=accent] .composer-anon input{accent-color:var(--accent-edge)}
.composer-anon+.composer-audience{margin-left:12px!important}
.photo-edit{display:flex;align-items:center;gap:18px;margin:6px 0 22px}
.photo-edit-face{width:76px;height:76px;flex:none;font-size:22px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--bg)}
.photo-edit-tools{display:grid;gap:8px;justify-items:start}
.photo-edit-tools small{color:var(--muted)}
.photo-upload{position:relative;gap:10px;cursor:pointer;min-height:40px;padding:9px 16px}
.photo-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.call-person .avatar{overflow:visible}
/* Mobile events: venue and city stay on one line; categories scroll sideways in one row. */
@media(max-width:650px){
  .event-row-info p span{display:inline}
  .events-filter-footer{align-items:stretch;gap:12px}
  .events-filter-footer .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .events-filter-footer .chips::-webkit-scrollbar{display:none}
  .events-filter-footer .chips .chip{flex:none}
  .dp-quick{gap:6px;margin:14px 0 12px}.dp-chip{padding:7px 10px}
  .dp-cal .dp-day{height:36px}
}
.dp-actions{position:sticky;bottom:0;background:var(--bg);padding:14px 0 2px;margin-top:6px;border-top:1px solid var(--line)}
/* One left edge on phones: page headings, cards and panels line up with the header (18px). */
@media(max-width:650px){
  html body #main :is(.social-workspace,.page-title,.map-heading,.settings-grid,.section.settings-grid){padding-left:18px;padding-right:18px}
  html body #main .home-social .social-app-grid{margin-left:0;margin-right:0}
  html body #main .settings-grid>.panel{margin-left:0;margin-right:0;width:auto}
}
/* Composer controls wrap cleanly: attachments, then who sees it and how, then Post. */
.composer-anon+.composer-audience{margin-left:0!important}
.social-composer .composer-bottom{flex-wrap:wrap;row-gap:12px;column-gap:16px;align-items:center}
@media(max-width:650px){.social-composer .composer-anon{margin-left:0;order:3}.social-composer .composer-audience{order:4;margin-left:0!important}.social-composer .composer-bottom .btn.primary{order:5;margin-left:auto}}
/* header avatar keeps its circle; long handles truncate instead */
#header .header-account .account-avatar{flex:none;aspect-ratio:1}
#header .header-account .account-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* settings photo note reads as plain helper text */
html body #main .photo-edit-tools small{text-transform:none;letter-spacing:0;font-size:12px;line-height:1.5;color:var(--muted);font-weight:400}
.dp-grid{padding-bottom:6px}
/* messages: empty list hint on phones, edges on the 18px line */
.chat-empty{display:none}
@media(max-width:760px){
  .chat-empty{display:grid;gap:18px;justify-items:start;padding:28px 18px}
  .chat-empty p{margin:0;color:var(--muted);max-width:34ch}
  html body #main .chat-list-head{padding:24px 18px 18px}
  html body #main .chat-city-link{padding:12px 18px}
  html body #main .chat-row{padding-left:18px;padding-right:18px}
  html body #main .chat-list{border-right:0}
  #header .header-account{max-width:min(184px,48vw)}
}