/* asuruonline.com layout refresh, 2026-11-15 on the homelab (owner: "modernise the layout and spacing and image borders").
   Loaded after the theme's own styles by the mu-plugin asuruonline-seo (wp_enqueue_style 'ao-refresh'); no template edited.
   Source: homelab-workspace clients/asuruonline/ct107/theme-geri/ao-refresh.css. Undo: remove the enqueue, or this file. */
:root { --ao-brand: #5c0101; --ao-r: 12px; --ao-r-lg: 16px; --ao-line: #eee6e6; --ao-muted: #6b6262; }

/* ── Images: softer corners, consistent crops ─────────────────────────────────────────────────── */
.pic, .block-img, .grid-img, .bodu-img, .singgle-featured, .post-content img, .g img, .a-single img { border-radius: var(--ao-r) !important; }
.block > a:first-child, .bodu-right > a:first-child { display: block; overflow: hidden; border-radius: var(--ao-r); background: #f4efef; }
.block-img { display: block; width: 100%; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; }
.block:hover .block-img { transform: scale(1.04); }
.bodu-right > a:first-child { border-radius: var(--ao-r-lg); }
.bodu-img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--ao-r-lg) !important; transition: transform .45s ease; }
.bodu:hover .bodu-img { transform: scale(1.02); }

/* ── Grids and spacing ──────────────────────────────────────────────────────────────────────── */
.five-grid, .four-grid { gap: 28px 24px !important; }
.two-grid { gap: 32px !important; align-items: center; }
.block-title { padding-top: 12px !important; }
.block-title a, .bodu-title a { transition: color .15s; }
.block-title a:hover, .bodu-title a:hover { color: var(--ao-brand) !important; }
.post-blocks { margin-top: 32px !important; }
.liner { height: 0 !important; margin: 44px 0 !important; border: 0 !important; border-top: 1px solid var(--ao-line) !important; background: none !important; }

/* ── Section titles: a maroon accent on a hairline ─────────────────────────────────────────── */
.front-header { margin-bottom: 26px !important; border-bottom: 1px solid var(--ao-line); align-items: flex-end; }
.front-header .header-title { position: relative; padding-bottom: 12px; line-height: 1.6 !important; }
.front-header .header-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 100%; min-width: 56px;
	height: 3px; border-radius: 3px 3px 0 0; background: var(--ao-brand); }
.front-header .header-title:hover { color: var(--ao-brand) !important; }

/* ── Lifestyle tiles ────────────────────────────────────────────────────────────────────────── */
.suruhee-block { border-radius: var(--ao-r-lg) !important; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.suruhee-block:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(40, 0, 0, .18); }

/* ── Article page ───────────────────────────────────────────────────────────────────────────── */
.singgle-featured { width: 100%; height: auto; border-radius: var(--ao-r-lg) !important; }
.featured-caption { margin-top: 10px !important; color: var(--ao-muted) !important; font-size: .92em !important; }
.post-content p { margin-bottom: 1.15em !important; }
.post-content img { max-width: 100%; height: auto; }
.post-content figure, .post-content .wp-caption { margin: 26px 0 !important; }
/* ads AdRotate places between paragraphs: same room above and below (the next paragraph sat flush under the image; owner:
   "dont have enough spacing between the bottom of the ad with the next paragraph", 2026-11-16) */
.post-content .g { margin: 30px 0 !important; clear: both; }
.post-content .g img { display: inline-block; vertical-align: middle; }
.tags-area { margin-top: 28px !important; }
.tags-area .tag, .article-tag { border-radius: 999px !important; }
.comments-area { margin-top: 36px !important; }
.comments-area .comment-input--field { border-radius: var(--ao-r) !important; border: 1px solid #e6dcdc !important;
	width: 100% !important; box-sizing: border-box; display: block; } /* its w-full is Tailwind too: the width was accidental */
.comments-area .comment-input--field:focus { border-color: var(--ao-brand) !important; box-shadow: 0 0 0 3px rgba(92, 1, 1, .12); outline: 0; }
/* send button: its template classes (bg-fehi-500, text-white, px-10) are Tailwind, which the theme never loads, so it showed as a
   small outlined circle; now the site's maroon pill (owner: "comment section send button looks strange", 2026-11-16) */
.comments-area #submit { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; min-height: 48px;
	padding: 10px 34px !important; border: 0 !important; border-radius: 999px !important; background: var(--ao-brand) !important;
	color: #fff !important; font-size: 1.1rem !important; line-height: 1.6 !important; cursor: pointer;
	box-shadow: 0 6px 16px rgba(92, 1, 1, .22); transition: background-color .15s, box-shadow .15s, transform .15s; }
.comments-area #submit:hover { background: #3a0000 !important; box-shadow: 0 8px 20px rgba(92, 1, 1, .3); }
.comments-area #submit:active { transform: translateY(1px); }
.comments-area #submit:focus-visible { outline: 3px solid rgba(92, 1, 1, .35); outline-offset: 3px; }
.comments-area #submit:disabled { opacity: .6; cursor: default; }
@media (max-width: 767.98px) { .comments-area #submit { width: 100%; } }

/* ── Header: sticky, compact once scrolled, current section underlined (2026-11-15, owner: "do 1 and 3") ───────────── */
body > header { position: sticky; top: 0; z-index: 1030; }
header .color-back { transition: box-shadow .2s ease; }
header .header-top { transition: padding .2s ease; }
header .header-logo .logo { transition: height .2s ease; }
html.ao-scrolled header .header-top { padding-top: 8px !important; padding-bottom: 8px !important; }
html.ao-scrolled header .header-logo .logo { height: 32px !important; width: auto; }
html.ao-scrolled header .color-back { box-shadow: 0 6px 20px rgba(40, 0, 0, .28); }
.down-area a { position: relative; text-decoration: none; }
.down-area a::after { content: ""; position: absolute; inset-inline: 0 35px; bottom: -8px; height: 2px; border-radius: 2px;
	background: #fff; opacity: 0; transform: scaleX(.4); transition: opacity .2s, transform .2s; }
.down-area a:hover::after { opacity: .45; transform: none; }
.down-area a.is-active::after { opacity: 1; transform: none; }
.down-area a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }

/* ── Phone menu (Bootstrap offcanvas) ───────────────────────────────────────────────────────── */
.offcanvas { background: linear-gradient(180deg, #5c0101 0%, #3a0000 100%) !important; color: #fff; width: min(84vw, 340px) !important; border: 0 !important; }
.offcanvas-header { padding: 18px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.offcanvas-header .logo { height: 40px; width: auto; }
.offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .85; }
.offcanvas-body { padding: 10px 12px 24px !important; }
.offcanvas .off-menu { margin: 0; border: 0 !important; }
.offcanvas .menu-item { display: block; padding: 14px 16px !important; border-radius: 12px; color: #fff !important; text-decoration: none;
	font-size: 1.35rem !important; line-height: 1.6; transition: background-color .15s; }
.offcanvas .menu-item:hover, .offcanvas .menu-item:focus-visible { background: rgba(255, 255, 255, .1); outline: 0; }
.offcanvas .menu-item.is-active { background: rgba(255, 255, 255, .16); box-shadow: inset -3px 0 0 #fff; }
.offcanvas .mob.search-area { margin-top: 18px; padding: 0 4px; }
.offcanvas .mob.search-area .search-field { width: 100%; border: 0 !important; border-radius: 999px !important; padding: 12px 18px !important;
	background: rgba(255, 255, 255, .95) !important; color: #1f1a1a !important; }
@media (prefers-reduced-motion: reduce) {
	header .color-back, header .header-top, header .header-logo .logo, .down-area a::after { transition: none; }
}

/* ── Push alerts (Perfecty Push): its prompt and bell in the site's look, right-to-left (2026-11-15) ─────────────────── */
.perfecty-push-dialog-box { direction: rtl; border-radius: 16px !important; box-shadow: 0 18px 50px rgba(40, 0, 0, .25) !important;
	border: 1px solid var(--ao-line) !important; padding: 18px 20px !important; max-width: calc(100vw - 24px); box-sizing: border-box; }
.perfecty-push-dialog-icon { border-radius: 12px; }
.perfecty-push-dialog-title { text-align: right !important; font-family: "MV Waheed", "MV Faseyha", Faruma, sans-serif !important;
	font-size: 1.1rem !important; line-height: 1.9 !important; color: #1f1a1a !important; }
.perfecty-push-dialog-buttons { display: flex; gap: 10px; justify-content: flex-start; flex-direction: row-reverse; }
#perfecty-push-dialog-subscribe, #perfecty-push-dialog-cancel { border-radius: 999px !important; padding: 8px 22px !important;
	font-family: "MV Waheed", "MV Faseyha", Faruma, sans-serif !important; font-size: 1rem !important; border: 0 !important; cursor: pointer; }
#perfecty-push-dialog-subscribe { background: var(--ao-brand) !important; color: #fff !important; }
#perfecty-push-dialog-subscribe:hover { background: #3a0000 !important; }
#perfecty-push-dialog-cancel { background: #f6eeee !important; color: var(--ao-brand) !important; }
/* layout: a compact bottom sheet (was a tall card dropping over the header): small icon beside the question, two equal buttons
   below with "yes" first in reading order (right). */
#perfecty-push-dialog-container.perfecty-push-dialog-container { top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
	left: 12px !important; right: 12px !important; }
#perfecty-push-dialog-container .perfecty-push-dialog-box { display: grid !important; grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px;
	align-items: center; max-width: 440px !important; width: auto !important; margin: 0 auto !important; text-align: right; }
#perfecty-push-dialog-container .perfecty-push-dialog-icon { width: 52px !important; height: 52px !important; max-width: none !important; margin: 0 !important; }
#perfecty-push-dialog-container .perfecty-push-dialog-form { display: contents !important; }
#perfecty-push-dialog-container .perfecty-push-dialog-title { margin: 0 !important; padding: 0 !important; font-size: 1.02rem !important; line-height: 1.8 !important; }
#perfecty-push-dialog-container .perfecty-push-dialog-buttons { grid-column: 1 / -1; display: flex !important; flex-direction: row !important; gap: 10px; margin: 2px 0 0 !important; }
#perfecty-push-dialog-container .perfecty-push-dialog-buttons button { flex: 1 1 0; margin: 0 !important; padding: 11px 16px !important; float: none !important; }
#perfecty-push-dialog-container #perfecty-push-dialog-subscribe { order: -1; }
#perfecty-push-settings-open { background: var(--ao-brand) !important; border-radius: 50% !important; box-shadow: 0 8px 22px rgba(40, 0, 0, .3) !important; }
#perfecty-push-settings-form { direction: rtl; border-radius: 14px !important; font-family: "MV Waheed", "MV Faseyha", Faruma, sans-serif !important; }

/* ── Project audit fixes, 2026-11-16 (owner: "fix all"; report: clients/asuruonline/docs/audit/project-audit/05-ui-ux.md) ── */
/* (The 768px patch that stood here is gone: the breakpoint itself is fixed in ao-base.css, and the home page has one copy.) */

/* dates, reading time, sidebar dates: #9e9e9e on white was 2.7:1; this is 5.6:1 (UX-006) */
.meta, .small-meta { color: var(--ao-muted) !important; }
.small-meta { font-size: 13px !important; }

/* skip link: hidden until a keyboard user tabs to it (UX-004) */
.ao-skip { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2000; padding: 10px 18px; border-radius: 999px; background: #fff;
	color: var(--ao-brand) !important; font-family: "MV Waheed", sans-serif; text-decoration: none; transform: translateY(-160%); transition: transform .15s; }
.ao-skip:focus { transform: none; outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
#ao-content:focus { outline: 0; }

/* phone menu button: a real button now (it was an unnamed link) */
.ao-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0;
	border-radius: 12px; background: transparent; color: #fff; cursor: pointer; }
.ao-menu-btn:hover { background: rgba(255, 255, 255, .1); }
.ao-menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* search fields are type=search now: keep the site's look, not the browser's */
.search-field, .ao-searchbox input { -webkit-appearance: none; appearance: none; }
.search-field:focus-visible { outline: 2px solid rgba(255, 255, 255, .7) !important; outline-offset: 2px; }
/* phone menu search: one rounded field with a round search button inside its far end (2026-11-16, owner: "mobile menu search
   bar and button looks strange": they were 60px tall side by side, the button squeezed into an egg shape) */
.ao-menu-search { position: relative; display: block; }
.offcanvas .ao-menu-search .search-field { display: block; width: 100%; height: 48px; margin: 0; padding: 0 18px !important;
	padding-inline-end: 54px !important; line-height: 48px !important; font-size: 1.05rem; box-sizing: border-box;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.offcanvas .ao-menu-search .search-field:focus { outline: 0 !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.ao-menu-search button { position: absolute; top: 4px; inset-inline-end: 4px; display: inline-flex; align-items: center;
	justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ao-brand);
	color: #fff; cursor: pointer; transition: background-color .15s; }
.ao-menu-search button:hover { background: #3a0000; }
.ao-menu-search button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* tablets (768–991px): the seven-link top menu and search need about 1000px and wrapped into the logo, so tablets get the phone's
   menu button; cards go three to a row instead of five (about 130px wide) */
/* side room from 768px until the 1100px column fits (the base .container has no padding, so pages touched the screen edges) */
@media (min-width: 768px) and (max-width: 1139.98px) {
	body > .container, header .header-top.container { padding-inline: 20px !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	header .lap { display: none !important; }
	header .mobile1 { display: block !important; }
	.five-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.four-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* home page: cards that only desktop shows (the page had a separate phone copy with fewer cards) */
@media (max-width: 767.98px) { .ao-wide { display: none !important; } }

/* list pages: title, search box, empty state (UX-010) */
.ao-list-title { font-size: 26px !important; margin: 4px 0 18px !important; line-height: 1.8 !important; }
.ao-count { color: var(--ao-muted); font-size: .7em; }
/* search box on light pages (search results, empty lists, 404): the phone menu's design, a rounded 48px field with a round
   search button inside its far end (it was a 60px field beside an egg-shaped button) */
.ao-searchbox { position: relative; display: block; max-width: 520px; margin: 0 0 28px; }
.ao-searchbox input { display: block; width: 100%; height: 48px; margin: 0; padding: 0 18px; padding-inline-end: 54px;
	box-sizing: border-box; border: 1px solid #e6dcdc; border-radius: 999px; background: #fff; color: #1f1a1a;
	font-family: "MV Faseyha", "MV Waheed", sans-serif; font-size: 1.05rem; line-height: 46px; direction: rtl; }
.ao-searchbox input:focus { outline: 0; border-color: var(--ao-brand); box-shadow: 0 0 0 3px rgba(92, 1, 1, .12); }
.ao-searchbox button { position: absolute; top: 4px; inset-inline-end: 4px; display: inline-flex; align-items: center;
	justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ao-brand);
	color: #fff; cursor: pointer; transition: background-color .15s; }
.ao-searchbox button:hover { background: #3a0000; }
.ao-searchbox button:focus-visible { outline: 2px solid var(--ao-brand); outline-offset: 2px; }
.ao-empty { margin: 8px 0 40px; font-family: "MV Faseyha", sans-serif; font-size: 1.15rem; line-height: 2; color: #3a3b3c; }
.ao-empty a { color: var(--ao-brand); }

/* page numbers (UX-009): a row of round buttons, current page filled */
.ao-pager { margin: 36px 0 8px; padding-top: 22px; border-top: 1px solid var(--ao-line); }
.ao-pager ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ao-pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px;
	border-radius: 999px; background: #f6eeee; color: var(--ao-brand) !important; text-decoration: none; font-size: 1rem; }
.ao-pager .pag-num { font-family: "Work Sans", system-ui, sans-serif; }
.ao-pager__step a { font-family: "MV Waheed", sans-serif; padding: 0 20px; }
.ao-pager a:hover { background: var(--ao-brand); color: #fff !important; }
.ao-pager a[aria-current="page"] { background: var(--ao-brand); color: #fff !important; font-weight: 600; }
.ao-pager a:focus-visible { outline: 2px solid var(--ao-brand); outline-offset: 2px; }
.ao-pager__gap { color: var(--ao-muted); padding: 0 4px; }

/* breaking news label above an article's title (UX-016) */
.ao-breaking-label { display: inline-flex; align-items: center; gap: 8px; margin: 24px 0 -14px; padding: 4px 14px; border-radius: 999px;
	background: #ba0204; color: #fff; font-family: "MV Waheed", sans-serif; font-size: 1rem; line-height: 1.8; }
.ao-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* comments: status line, closed note (UX-005) */
.comments-area .comment-input--field { margin-bottom: 14px !important; padding: 12px 14px !important; }   /* was Tailwind mb-4/py-4/px-4 */
#comment-status:empty { display: none; }
#comment-status { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--ao-r); font-family: "MV Faseyha", sans-serif; line-height: 1.9; }
#comment-status.ajax-success { background: #f1f7f1; color: #1d5a24; }
#comment-status.ajax-error { background: #fbeeee; color: #8a0a0a; }
.ao-comments-closed { margin: 20px 0; color: var(--ao-muted); font-family: "MV Faseyha", sans-serif; }

/* photos that open the zoom: visible focus (UX-017) */
.singgle-featured[tabindex]:focus-visible, .post-content img[tabindex]:focus-visible { outline: 3px solid var(--ao-brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ao-skip { transition: none; } }

/* ── Links: the site's maroon instead of Bootstrap's default blue (#0d6efd), which showed on the comment time, "reply" and
   "cancel reply", and would on any link in an article's text (2026-11-16, owner: "check if theres hyper links in weired blue
   color"). Links with their own colour (menus, cards, footer, buttons) keep it: those rules are more specific. ── */
a { color: var(--ao-brand); }
.post-content a { color: var(--ao-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-content a:hover { text-decoration-thickness: 2px; }
.comments-area .story-timestamp a { display: inline-flex; align-items: center; gap: 5px; color: var(--ao-muted) !important;
	text-decoration: none; font-size: 13px; }
.comments-area .comment-reply-link, .comments-area .cancel-comment-reply a { color: var(--ao-brand) !important; text-decoration: none;
	font-family: "MV Waheed", sans-serif; font-size: .95rem; }
.comments-area .comment-reply-link:hover, .comments-area .cancel-comment-reply a:hover, .comments-area .story-timestamp a:hover {
	text-decoration: underline; text-underline-offset: 4px; }

/* ── Share buttons beside the article (desktop and tablet): one vertical column, centred under the author, instead of wrapping
   two to a row in the narrow column (2026-11-16, owner: "on desktop article social share buttons on one column vertically").
   Phones keep the row under the byline. ── */
@media (min-width: 768px) {
	.single-kuda .ao-share { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 10px; margin-top: 18px; }
}

/* ── Full audit fixes, 2026-11-16 (owner: "lets attend to all"; reports in clients/asuruonline/docs/audit/project-audit/) ──── */

/* sticky header vs sticky columns and in-page targets (UX-020): the article's share column and the sidebar stop below the
   header, and anchors, the skip link and focused fields scroll clear of it */
html { scroll-padding-top: 96px; }
.sidebar .sticker, .single-stick { top: 84px !important; }
@media (max-width: 767.98px) { html { scroll-padding-top: 72px; } }

/* white links on maroon keep their colour on hover (UX-018) */
header .down-area a:hover, .breaking a:hover, .ao-footer a:hover, .offcanvas .menu-item:hover { color: #fff !important; }

/* visible focus on every text field (UX-019; the old Customizer rule removed it) */
.comments-area .comment-input--field:focus-visible, .ao-searchbox input:focus-visible, .ao-404 input:focus-visible {
	outline: 2px solid var(--ao-brand) !important; outline-offset: 2px; }
.offcanvas .menu-item:focus-visible { outline: 2px solid #fff !important; outline-offset: -2px; }
.ao-lb button:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }

/* tablets (three to a row): a last row with one or two cards is hidden, so every row is full (UX-025) */
@media (min-width: 768px) and (max-width: 991.98px) {
	.five-grid > .block:nth-child(3n+1):nth-last-child(-n+2),
	.five-grid > .block:nth-child(3n+1):nth-last-child(-n+2) ~ .block { display: none !important; }
}

/* ads carry a visible label (CX-006; the Editorial Policy promises clearly marked ads). The old "follow us" captions stay hidden
   as the owner decided on 2026-11-15; this is a separate, standard label. */
.g::before { content: "ޢިޝްތިހާރު"; display: block; margin: 0 0 6px; color: var(--ao-muted); font-family: "MV Faseyha", sans-serif;
	font-size: 12px; line-height: 1.6; text-align: center; letter-spacing: .02em; }

/* breaking bar label (UX-023) */
.ao-breaking-tag { display: inline-block; margin-inline-end: 10px; padding: 0 10px; border-radius: 999px; background: #fff;
	color: #ba0204; font-family: "MV Waheed", sans-serif; font-size: .85rem; line-height: 1.9; vertical-align: middle; }

/* Thaana/Latin keyboard switch on forms (CX-003) */
.ao-kb { display: inline-flex; align-items: center; height: 28px; margin: 0 0 8px; padding: 0 12px; border: 1px solid #e6dcdc;
	border-radius: 999px; background: #fff; color: var(--ao-brand); font: 600 12px/1 "Work Sans", system-ui, sans-serif; cursor: pointer; }
.ao-kb[lang="dv"] { font: 400 13px/1 "MV Waheed", sans-serif; }
.ao-kb:hover { border-color: var(--ao-brand); }
.ao-kb:focus-visible { outline: 2px solid var(--ao-brand); outline-offset: 2px; }
.ao-searchbox .ao-kb, .ao-menu-search .ao-kb { position: absolute; top: -36px; inset-inline-start: 0; margin: 0; }
.ao-searchbox, .ao-menu-search { margin-top: 36px; }
.ao-404 .ao-searchbox { margin-top: 40px; }
.offcanvas .ao-kb { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* spam trap field: never seen, never focused (SEC-011) */
.ao-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* one-time tip for iPhone readers on how to get alerts (CX-004; shown by the mu-plugin) */
.ao-ios-tip { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1060;
	display: flex; align-items: flex-start; gap: 10px; max-width: 460px; margin: 0 auto; padding: 14px 16px; border-radius: 16px;
	background: #fff; border: 1px solid var(--ao-line); box-shadow: 0 18px 50px rgba(40, 0, 0, .25); direction: rtl; }
.ao-ios-tip p { margin: 0; font-family: "MV Faseyha", sans-serif; font-size: .98rem; line-height: 1.9; color: #1f1a1a; }
.ao-ios-tip button { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f6eeee; color: var(--ao-brand);
	font-size: 20px; line-height: 1; cursor: pointer; }

/* a typed guest byline looks like the linked one (CX-009) */
.single-author span.author-name { color: #333; }

/* ── Avatars: round, cropped, a light ring (author on articles, commenters) ─────────────────── */
.article-author-pic, .comment-author { border-radius: 50% !important; object-fit: cover; background: #f4efef;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ao-line); }

@media (max-width: 767.98px) {
	.five-grid, .four-grid { gap: 22px 16px !important; }
	.liner { margin: 32px 0 !important; }
	.front-header { margin-bottom: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.block-img, .bodu-img, .suruhee-block { transition: none; }
	.block:hover .block-img, .bodu:hover .bodu-img, .suruhee-block:hover { transform: none; }
}

/* "(in English)" after the English policy links in the footer (2026-11-16, audit CONTENT-003) */
.ao-lang-hint { font-family: "MV Faseyha", sans-serif; font-size: .8em; opacity: .7; }
.ao-footer__bottom[dir="rtl"] { direction: rtl; font-family: "MV Faseyha", "Work Sans", sans-serif; }