/* Atlas Social. Same tokens as the directory's place page; logical properties keep RTL and LTR right. */
.atlas-social {
	--as-bg: var(--atlas-bg, #F7F4EE);
	--as-surface: var(--atlas-surface, #FFFFFF);
	--as-ink: var(--atlas-ink, #1C2426);
	--as-muted: var(--atlas-muted, #5B6466);
	--as-line: var(--atlas-line, #E4DED3);
	--as-line-strong: var(--atlas-line-strong, #D9D2C5);
	--as-accent: var(--atlas-accent, #0B6B67);
	--as-accent-soft: var(--atlas-accent-soft, #E3EFEC);
	--as-accent-ink: var(--atlas-accent-ink, #0B4F4C);
	--as-warm: var(--atlas-warm, #9A5B1E);
	--as-like: #B4233C;
	--as-danger: var(--atlas-danger, #9A3B1E);
	--as-radius: 16px;
	container: atlas-social / inline-size;
	color: var(--as-ink);
	line-height: 1.8;
}
.atlas-social *, .atlas-social *::before, .atlas-social *::after { box-sizing: border-box; }
.atlas-social [hidden] { display: none !important; }
.as-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atlas-social a:focus-visible, .atlas-social button:focus-visible, .atlas-social input:focus-visible, .atlas-social select:focus-visible, .atlas-social textarea:focus-visible, .atlas-social summary:focus-visible { outline: 3px solid var(--as-accent); outline-offset: 2px; }
.atlas-social p { margin: 0; }
.atlas-social ol, .atlas-social ul { list-style: none; margin: 0; padding: 0; }

.as-column { max-inline-size: 680px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.as-card { background: var(--as-surface); border: 1px solid var(--as-line); border-radius: var(--as-radius); padding: 16px; }

/* Buttons */
.as-btn { font: inherit; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; padding: 8px 18px; border-radius: 12px; border: 1px solid var(--as-line-strong); background: var(--as-surface); color: var(--as-ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
.as-btn:hover { border-color: var(--as-ink); }
.as-btn--primary { background: var(--as-accent); border-color: var(--as-accent); color: #fff; font-weight: 600; }
.as-btn--primary:hover { background: var(--as-accent-ink); border-color: var(--as-accent-ink); color: #fff; }
.as-btn[disabled] { opacity: .6; cursor: progress; }
.as-btn input[type=file] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }

/* Avatars */
.as-avatar { --as-size: 44px; inline-size: var(--as-size); block-size: var(--as-size); border-radius: 50%; object-fit: cover; flex: none; display: inline-block; background: #E9E5DB; }
img.as-avatar[width="32"] { --as-size: 32px; }
img.as-avatar[width="40"] { --as-size: 40px; }
img.as-avatar[width="72"] { --as-size: 72px; }
img.as-avatar[width="88"] { --as-size: 88px; }
.as-avatar--letter { --as-hue: 170; display: inline-grid; place-items: center; background: hsl(var(--as-hue) 35% 88%); color: hsl(var(--as-hue) 45% 26%); font-weight: 700; font-size: calc(var(--as-size) * .42); line-height: 1; }

.as-join { text-align: center; display: grid; gap: 12px; }
.as-join p:last-child { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.as-empty { color: var(--as-muted); text-align: center; padding: 24px 12px; }
.as-more { text-align: center; }

/* Composer */
.as-composer { display: grid; gap: 12px; }
.as-composer__top { display: flex; gap: 12px; align-items: flex-start; }
.as-composer textarea, .as-comment-form textarea, .as-edit input[type=text], .as-edit input[type=tel], .as-edit textarea, .as-field input, .as-place-search input, .as-login input, .as-post-edit textarea {
	font: inherit; inline-size: 100%; border: 1px solid var(--as-line-strong); border-radius: 12px; padding: 10px 12px; background: var(--as-surface); color: inherit; min-block-size: 44px;
}
.as-composer textarea { resize: vertical; min-block-size: 88px; border-color: transparent; background: var(--as-bg); }
.as-composer textarea:focus { background: var(--as-surface); border-color: var(--as-line-strong); }
.as-composer__photos { display: flex; flex-wrap: wrap; gap: 8px; }
.as-composer__photos:empty { display: none; }
.as-composer__photos li { position: relative; inline-size: 84px; block-size: 84px; border-radius: 10px; overflow: hidden; background: #E9E5DB; }
.as-composer__photos li.is-loading { animation: as-pulse 1s infinite alternate; }
.as-composer__photos img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.as-composer__photos button { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; inline-size: 28px; block-size: 28px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.as-composer__place { display: grid; gap: 8px; }
.as-composer__place:not(:has(> :not([hidden]):not(input[type=hidden]))) { display: none; }
.as-composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-block-start: 1px solid var(--as-line); padding-block-start: 12px; }
.as-composer__spacer { flex: 1; }
.as-composer__status { font-size: 13px; color: var(--as-muted); }
.as-composer__status:empty { display: none; }
.as-composer__status.is-bad, .as-edit [data-as-status].is-bad { color: var(--as-danger); }
.as-tool { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding: 6px 12px; border-radius: 10px; border: 0; background: none; color: var(--as-muted); cursor: pointer; position: relative; }
.as-tool:hover { background: var(--as-bg); color: var(--as-ink); }
.as-tool input[type=file] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.as-tool:focus-within { outline: 3px solid var(--as-accent); outline-offset: 2px; }
select.as-tool { appearance: auto; }
.as-chip { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: 14px; padding: 4px 6px 4px 12px; padding-inline: 12px 6px; border-radius: 999px; background: var(--as-accent-soft); color: var(--as-accent-ink); font-weight: 600; }
.as-chip button { border: 0; background: none; color: inherit; font-size: 18px; inline-size: 28px; block-size: 28px; border-radius: 50%; cursor: pointer; }
.as-chip button:hover { background: rgb(0 0 0 / .08); }
.as-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--as-muted); cursor: pointer; }
.as-check input { inline-size: 18px; block-size: 18px; accent-color: var(--as-accent); }

/* Search lists (place in the composer, home town in the profile) */
.as-place-search, .as-field { position: relative; }
.as-place-search__results { position: absolute; z-index: 20; inset-inline: 0; inset-block-start: calc(100% + 4px); background: var(--as-surface); border: 1px solid var(--as-line-strong); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); max-block-size: 300px; overflow: auto; padding: 4px; }
.as-place-search__results button { font: inherit; display: grid; inline-size: 100%; text-align: start; gap: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; line-height: 1.5; }
.as-place-search__results button:hover, .as-place-search__results button:focus-visible { background: var(--as-bg); }
.as-place-search__results span { font-size: 12px; color: var(--as-muted); }
.as-place-search__results .as-empty { padding: 10px; font-size: 14px; }

/* Tabs and filters */
.as-tabs { display: flex; gap: 4px; padding: 4px; background: var(--as-surface); border: 1px solid var(--as-line); border-radius: 14px; }
.as-tabs a { flex: 1; text-align: center; padding: 8px; border-radius: 10px; color: var(--as-muted); text-decoration: none; font-weight: 600; font-size: 15px; }
.as-tabs a[aria-current] { background: var(--as-accent-soft); color: var(--as-accent-ink); }
.as-filter { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.as-filter__title { font-size: 1.3em; margin: 0; line-height: 1.4; }
.as-filter__clear { font-size: 14px; color: var(--as-accent); }
.as-feed { display: flex; flex-direction: column; gap: 16px; }

/* Post card */
.as-post { background: var(--as-surface); border: 1px solid var(--as-line); border-radius: var(--as-radius); padding: 16px 16px 6px; display: grid; gap: 12px; animation: as-in .25s ease-out; }
.as-post.is-new { box-shadow: 0 0 0 2px var(--as-accent-soft); }
.as-post__head { display: flex; align-items: center; gap: 12px; }
.as-post__avatar { display: inline-flex; flex: none; }
.as-post__who { flex: 1; min-inline-size: 0; display: grid; line-height: 1.5; }
.as-name { font-weight: 700; color: var(--as-ink); text-decoration: none; }
a.as-name:hover { text-decoration: underline; }
.as-post__meta { font-size: 13px; color: var(--as-muted); overflow-wrap: anywhere; }
.as-post__meta a { color: inherit; text-decoration: none; }
.as-post__meta a:hover { text-decoration: underline; }
.as-post__place { color: var(--as-accent) !important; font-weight: 600; }
.as-post__private { font-weight: 600; }
.as-post__body { overflow-wrap: anywhere; font-size: 16px; }
.as-post__body p + p { margin-block-start: .6em; }
.as-post__body a, .as-comment__bubble a:not(.as-name), .as-profile__bio a { color: var(--as-accent); text-decoration: none; }
.as-post__body a:hover { text-decoration: underline; }
.as-note { font-size: 13px; padding: 6px 12px; border-radius: 10px; background: #F6ECE0; color: var(--as-warm); }
.as-note--bad { background: #F7E6E0; color: var(--as-danger); }

/* Photo grid */
.as-photos { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; margin-inline: -4px; }
.as-photos__item { position: relative; display: block; overflow: hidden; background: #E9E5DB; cursor: zoom-in; }
.as-photos__img, .as-photos__item img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.as-photos--1 { grid-template-columns: 1fr; grid-auto-rows: auto; }
.as-photos--1 .as-photos__item img { block-size: auto; max-block-size: 560px; }
.as-photos--3 { grid-template-rows: 200px 200px; }
.as-photos--3 .as-photos__item:first-child { grid-row: span 2; }
.as-photos__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .45); color: #fff; font-size: 26px; font-weight: 700; }

/* Actions */
.as-post__actions { display: flex; gap: 4px; border-block-start: 1px solid var(--as-line); padding-block-start: 4px; }
.as-act { font: inherit; font-size: 14px; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; border: 0; border-radius: 10px; background: none; color: var(--as-muted); cursor: pointer; }
.as-act:hover:not([disabled]) { background: var(--as-bg); color: var(--as-ink); }
.as-act[disabled] { opacity: .5; cursor: default; }
.as-act--like.is-on { color: var(--as-like); font-weight: 700; }
.as-act--like.is-on .as-icon { fill: currentColor; animation: as-pop .3s; }
.as-icon { flex: none; inline-size: 20px; block-size: 20px; }
.as-tool .as-icon { inline-size: 18px; block-size: 18px; }
.as-act__n:empty { display: none; }

/* "…" menus */
.as-menu { position: relative; }
.as-menu > summary { list-style: none; cursor: pointer; }
.as-menu > summary::-webkit-details-marker { display: none; }
.as-menu__btn { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; color: var(--as-muted); font-size: 20px; }
.as-menu__btn:hover { background: var(--as-bg); }
.as-menu__list { position: absolute; z-index: 30; inset-inline-end: 0; inset-block-start: calc(100% + 4px); min-inline-size: 200px; background: var(--as-surface); border: 1px solid var(--as-line-strong); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); padding: 6px; display: grid; gap: 2px; }
.as-menu__list button { font: inherit; font-size: 14px; text-align: start; padding: 8px 10px; min-block-size: 40px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.as-menu__list button:hover { background: var(--as-bg); }
.as-menu__list button.is-danger, [data-as-delete-post], [data-as-delete-comment].is-danger { color: var(--as-danger); }
.as-menu__list button.is-danger { background: #F7E6E0; font-weight: 700; }
.as-report { display: grid; gap: 2px; }
.as-menu__list > button + .as-report { border-block-start: 1px solid var(--as-line); padding-block-start: 4px; margin-block-start: 2px; }
.as-report__title { font-size: 12px; color: var(--as-muted); padding: 4px 10px 0; }
.as-menu--small { display: inline-block; }
.as-menu--small > summary { font-size: 12px; color: var(--as-muted); }
.as-menu--small > summary:hover { color: var(--as-ink); }
.as-menu--small .as-menu__list { inset-inline-end: auto; inset-inline-start: 0; }

/* Comments */
.as-comments { border-block-start: 1px solid var(--as-line); padding-block: 12px 10px; display: grid; gap: 12px; }
.as-comments__list { display: grid; gap: 10px; }
.as-comments__list:empty { display: none; }
.as-comment { display: flex; gap: 8px; align-items: flex-start; }
.as-comment--reply { margin-inline-start: 40px; }
.as-comment__main { min-inline-size: 0; flex: 1; }
.as-comment__bubble { display: inline-block; max-inline-size: 100%; background: var(--as-bg); border-radius: 14px; padding: 6px 12px; overflow-wrap: anywhere; font-size: 15px; line-height: 1.7; }
.as-comment__bubble .as-name { display: block; font-size: 13px; }
.as-comment__bubble p + p { margin-block-start: .4em; }
.as-comment__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 12px; color: var(--as-muted); padding-inline: 12px; }
.as-comment__tools > button { font: inherit; background: none; border: 0; padding: 4px 0; min-block-size: 32px; color: inherit; font-weight: 600; cursor: pointer; }
.as-comment__tools > button:hover { color: var(--as-ink); }
.as-comment.is-new .as-comment__bubble { animation: as-flash 1.2s; }
.as-comment-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.as-comment-form textarea { flex: 1; resize: none; min-block-size: 44px; border-radius: 22px; padding-inline: 16px; field-sizing: content; max-block-size: 160px; }
.as-comment-form__reply { flex-basis: 100%; order: -1; font-size: 13px; color: var(--as-muted); }
.as-comment-form__reply button { font: inherit; background: none; border: 0; color: var(--as-accent); cursor: pointer; text-decoration: underline; }
.as-comments__login { font-size: 14px; }
.as-comments__login a { color: var(--as-accent); }

/* Profile */
.as-profile { display: grid; gap: 14px; padding-block-end: 8px; }
.as-profile__top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.as-profile__who { flex: 1 1 200px; min-inline-size: 0; line-height: 1.5; }
.as-profile__name { font-size: 1.45em; font-weight: 800; }
.as-profile__handle { color: var(--as-muted); font-size: 14px; }
.as-profile__home { color: var(--as-muted); font-size: 14px; margin-block-start: 4px !important; }
.as-profile__buttons { display: flex; gap: 6px; align-items: center; }
.as-profile__bio { overflow-wrap: anywhere; }
.as-profile__stats { display: grid; grid-template-columns: repeat(5, 1fr); border-block-start: 1px solid var(--as-line); padding-block-start: 6px; }
.as-profile__stats a { display: grid; justify-items: center; padding: 6px 2px; border-radius: 10px; text-decoration: none; color: var(--as-muted); font-size: 13px; line-height: 1.5; border-block-end: 2px solid transparent; border-end-start-radius: 0; border-end-end-radius: 0; }
.as-profile__stats a:hover { background: var(--as-bg); }
.as-profile__stats strong { font-size: 18px; color: var(--as-ink); }
.as-profile__stats a[aria-current] { border-block-end-color: var(--as-accent); color: var(--as-accent-ink); }

.as-edit { display: grid; gap: 14px; }
.as-edit label { display: block; font-size: 14px; font-weight: 600; margin-block-end: 4px; }
.as-edit__avatar { display: flex; gap: 16px; align-items: center; }
.as-edit__avatar label { margin: 0; position: relative; font-weight: 400; }
.as-edit__bar { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--as-muted); }

.as-members { display: grid; gap: 4px; padding: 8px; }
.as-member { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px; }
.as-member:hover { background: var(--as-bg); }
.as-member__who { flex: 1; min-inline-size: 0; display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; line-height: 1.4; }
.as-member__who > span { display: grid; min-inline-size: 0; }
.as-member__handle { font-size: 13px; color: var(--as-muted); }

.as-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.as-places a { display: grid; gap: 2px; text-decoration: none; color: inherit; line-height: 1.5; }
.as-places__img { --as-type: #0B6B67; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--as-type) 18%, #fff); display: block; }
.as-places__img img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .25s; }
.as-places a:hover img { transform: scale(1.04); }
.as-places__type { font-size: 12px; color: var(--as-muted); margin-block-start: 4px; }
.as-places__name { font-weight: 700; }

/* Profile editing: username, emails, mobile number */
.as-edit-wrap { display: grid; gap: 16px; }
.as-edit__title { font-size: 1.1em; margin: 0; line-height: 1.4; }
.as-handle-field { display: flex; align-items: center; border: 1px solid var(--as-line-strong); border-radius: 12px; padding-inline-start: 12px; background: var(--as-surface); }
.as-handle-field:focus-within { outline: 3px solid var(--as-accent); outline-offset: 2px; }
.as-handle-field > span { color: var(--as-muted); }
.as-edit .as-handle-field input { border: 0; outline: 0; padding-inline-start: 2px; }
.as-field-note { display: block; font-size: 12px; color: var(--as-muted); margin-block-start: 4px; }
.as-edit__emails { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.as-edit__emails legend { font-size: 14px; font-weight: 600; margin-block-end: 6px; padding: 0; }
.as-edit__emails .as-check { color: var(--as-ink); }
.as-phone__now { color: var(--as-muted); }
.as-welcome { background: var(--as-accent-soft); border-color: transparent; color: var(--as-accent-ink); font-weight: 600; }
.as-link { font: inherit; font-size: 14px; background: none; border: 0; padding: 6px 0; min-block-size: 36px; color: var(--as-accent); cursor: pointer; text-decoration: underline; }
.as-link[disabled] { color: var(--as-muted); text-decoration: none; cursor: default; }

/* Mobile login */
.as-column--narrow { max-inline-size: 440px; }
.as-login { display: grid; gap: 12px; padding: 24px; }
.as-login__title { font-size: 1.3em; margin: 0; line-height: 1.4; }
.as-login__step { display: grid; gap: 10px; }
.as-login label { font-weight: 600; font-size: 14px; }
.as-login input[type=tel] { font-size: 18px; letter-spacing: .04em; }
.as-code { font-size: 26px !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding-inline-start: calc(12px + .5em) !important; }
.as-login__hint, .as-login__sent { font-size: 14px; color: var(--as-muted); }
.as-login__again { font-size: 14px; color: var(--as-muted); text-align: center; }
.as-login__status { font-size: 14px; color: var(--as-ink); font-weight: 600; min-block-size: 1.5em; }
.as-login__status:empty { min-block-size: 0; }
.as-login__other { font-size: 14px; text-align: center; border-block-start: 1px solid var(--as-line); padding-block-start: 12px; }
.as-login__other a { color: var(--as-muted); }
.as-login__links { display: flex; gap: 8px; flex-wrap: wrap; }
.as-btn--wide { inline-size: 100%; }

/* Editing a post */
.as-post-edit { display: grid; gap: 8px; }
.as-post-edit textarea { resize: vertical; min-block-size: 110px; }
.as-post-edit__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.as-post__edited { font-style: italic; }

/* Search, popular tags, suggestions */
.as-search { position: relative; }
.as-search__icon { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; transform: translateY(-50%); color: var(--as-muted); display: flex; pointer-events: none; }
.as-search input { font: inherit; inline-size: 100%; min-block-size: 46px; border: 1px solid var(--as-line); border-radius: 999px; padding-block: 8px; padding-inline: 44px 16px; background: var(--as-surface); color: inherit; }
.as-search input:focus { border-color: var(--as-accent); outline: 3px solid var(--as-accent-soft); }
.as-trending { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.as-trending__title { font-size: 13px; color: var(--as-muted); margin-inline-end: 4px; }
.as-chip--tag { text-decoration: none; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.as-chip--tag:hover { background: var(--as-accent); color: #fff; }
.as-suggest { padding-block-end: 8px; }
.as-suggest__title { font-size: 1em; margin: 0 0 4px; line-height: 1.5; }
.as-suggest .as-members { padding: 0; }
.as-member__note { font-size: 12px; color: var(--as-muted); }
.as-taglist { padding: 6px; display: grid; gap: 2px; }
.as-taglist a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit; }
.as-taglist a:hover { background: var(--as-bg); }
.as-taglist span { font-size: 13px; color: var(--as-muted); }
.as-ac { position: absolute; z-index: 100000; margin: 0; padding: 4px; list-style: none; background: var(--atlas-surface, #fff); color: var(--atlas-ink, #1C2426); border: 1px solid var(--atlas-line-strong, #D9D2C5); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .14); font-size: 14px; line-height: 1.5; max-block-size: 280px; overflow: auto; }
.as-ac[hidden] { display: none; }
.as-ac li { display: grid; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.as-ac li[aria-selected="true"], .as-ac li:hover { background: var(--atlas-accent-soft, #E3EFEC); }
.as-ac span { font-size: 12px; color: var(--atlas-muted, #5B6466); text-align: start; }

/* Travel map */
.as-travels { display: grid; gap: 12px; }
.as-travels__stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-weight: 700; }
.as-travels__stats li + li::before { content: "·"; margin-inline-end: 10px; color: var(--as-muted); font-weight: 400; }
.as-travels__bar { block-size: 8px; border-radius: 999px; background: var(--as-bg); overflow: hidden; }
.as-travels__bar span { display: block; block-size: 100%; background: linear-gradient(90deg, var(--as-accent), #3A9C8F); border-radius: inherit; }
.as-travels__map { block-size: 320px; border-radius: 12px; overflow: hidden; background: #E9E5DB; z-index: 0; }
.atlas-pin { background: none; border: 0; }
.atlas-pin__body { display: block; inline-size: 100%; block-size: 100%; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.atlas-pin__sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Notifications */
.as-notices { padding: 6px; display: grid; gap: 2px; }
.as-notice a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; color: inherit; line-height: 1.6; }
.as-notice a:hover { background: var(--as-bg); }
.as-notice.is-new a { background: var(--as-accent-soft); }
.as-notice__text { display: grid; }
.as-notice__time { font-size: 12px; color: var(--as-muted); }

/* On the place page */
.atlas-place__actions { flex-wrap: wrap; }
.atlas-place__actions .atlas-pbtn { white-space: nowrap; }
.as-on-place .as-column, .as-on-place .as-feed { max-inline-size: 680px; }
.as-on-place__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 12px; }
.as-on-place__head h2 { margin: 0; }
.as-on-place .as-more { margin-block-start: 12px; text-align: start; }
.as-on-place .as-empty { text-align: start; padding: 0; }
.as-save.is-on { background: var(--atlas-accent-soft, #E3EFEC); border-color: var(--atlas-accent, #0B6B67); color: var(--atlas-accent-ink, #0B4F4C); font-weight: 600; }
.as-count:empty { display: none; }
.as-count { font-size: 12px; color: inherit; opacity: .8; }

/* Toast and photo viewer */
.as-toast { position: fixed; z-index: 100000; inset-block-end: 24px; inset-inline-start: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #1C2426; color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 14px; max-inline-size: calc(100vw - 32px); transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
[dir=rtl] .as-toast { transform: translate(50%, 20px); }
.as-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
[dir=rtl] .as-toast.is-on { transform: translate(50%, 0); }
.as-viewer { border: 0; padding: 0; background: transparent; max-inline-size: 100vw; max-block-size: 100vh; inline-size: 100vw; block-size: 100vh; }
.as-viewer::backdrop { background: rgb(10 14 15 / .92); }
.as-viewer img { position: absolute; inset: 0; margin: auto; max-inline-size: calc(100vw - 32px); max-block-size: calc(100vh - 32px); object-fit: contain; }
.as-viewer__close { position: absolute; z-index: 1; inset-block-start: 12px; inset-inline-end: 12px; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .15); color: #fff; font-size: 26px; cursor: pointer; }

@keyframes as-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes as-pop { 50% { transform: scale(1.35); } }
@keyframes as-flash { from { background: var(--as-accent-soft); } }
@keyframes as-pulse { to { opacity: .5; } }

/* Phones */
@container atlas-social (max-width: 520px) {
	.as-card, .as-post { border-radius: 0; border-inline: 0; padding-inline: 12px; }
	.as-column { gap: 10px; }
	.as-photos { margin-inline: -12px; border-radius: 0; grid-auto-rows: 150px; }
	.as-photos--3 { grid-template-rows: 150px 150px; }
	.as-profile__stats a { font-size: 11px; }
	.as-profile__stats strong { font-size: 16px; }
	.as-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-comment--reply { margin-inline-start: 24px; }
	.as-tool { padding-inline: 8px; }
	.as-composer__bar .as-btn--primary { flex: 1 0 100%; }
	.as-tabs { margin-inline: 12px; }
	.as-filter, .as-more, .as-empty { padding-inline: 12px; }
	.as-search, .as-trending { margin-inline: 12px; }
	.as-travels__map { block-size: 240px; }
}
@media (max-width: 600px) {
	.as-on-place .as-post { border-radius: var(--as-radius); border-inline: 1px solid var(--as-line); }
}
@media (prefers-reduced-motion: reduce) {
	.atlas-social *, .as-toast { animation: none !important; transition: none !important; }
}