@charset "utf-8";
/**
 * FRONTEND mobile UX corrective pass
 * Load AFTER fa.polish.css + fa.b02.css + fa.b03.css (FA only).
 * Desktop behavior preserved unless scoped under max-width breakpoints.
 */

/* ------------------------------------------------------------------ */
/* Mobile nav shell — sticky hamburger + Contact                      */
/* ------------------------------------------------------------------ */

.mobile-nav-bar {
	display: none;
}

/* Desktop sticky main menu (JS adds .is-desktop-sticky) */
@media only screen and (min-width: 1031px) {
	.mobile-nav-placeholder {
		display: none;
		width: 100%;
		box-sizing: border-box;
	}
	.mobile-nav-placeholder.is-active {
		display: block;
	}
	/* Must beat flex-item .container .right { z-index:1000 } inside .main */
	.mobile-nav-shell.is-desktop-sticky {
		position: fixed;
		top: 0;
		z-index: 1100;
		box-sizing: border-box;
		padding: 6px 0 4px;
		background: #036;
		background-image: linear-gradient(to bottom, #0470b8, #035a94);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
		opacity: 0;
		animation: portalDesktopNavFadeIn 0.28s ease forwards;
	}
	.mobile-nav-shell.is-desktop-sticky .mobile-nav-bar {
		display: none;
	}
}

@keyframes portalDesktopNavFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-nav-shell.is-desktop-sticky {
		animation: none;
		opacity: 1;
	}
}

@media only screen and (max-width: 1030px) {
	.mobile-nav-shell {
		position: relative;
		z-index: 60;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		background: #036;
		background-image: linear-gradient(to bottom, #0470b8, #035a94);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
	}

	/* Pinned after header scrolls away (JS adds .is-pinned) — sticky fails inside short .mainhead */
	.mobile-nav-shell.is-pinned {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
	}

	.mobile-nav-placeholder {
		display: none;
		width: 100%;
		box-sizing: border-box;
	}

	.mobile-nav-placeholder.is-active {
		display: block;
	}

	.mobile-nav-bar {
		display: flex;
		flex-direction: row; /* DOM: hamburger then Contact → RTL puts Contact LEFT */
		align-items: center;
		justify-content: flex-start;
		gap: 2px;
		min-height: 48px;
		padding: 2px 8px;
		box-sizing: border-box;
		width: 100%;
	}

	.mobile-nav-bar .toglemenu#toglemenu,
	.mobile-nav-bar button.toglemenu {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		align-self: center;
		min-width: 44px;
		min-height: 44px;
		margin: 0;
		padding: 10px;
		vertical-align: middle;
	}

	.mobile-nav-bar a.toglemenu.contact-togle {
		display: inline-flex !important;
		align-items: center;
		align-self: center;
		min-height: 44px;
		margin: 0 !important;
		padding: 0 12px !important;
		vertical-align: middle !important;
		color: #fff !important;
		line-height: 1.2;
		white-space: nowrap;
		box-sizing: border-box;
	}

	.mobile-nav-shell .topmenu {
		/* stay under sticky shell; absolute relative to shell */
		left: 10px;
		right: auto;
		width: calc(100% - 20px);
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Scroll-margin so TOC / in-page anchors clear sticky bar */
	.guide-section-anchor,
	.guide-section-heading,
	.contentdata p.guide-section-heading {
		scroll-margin-top: 56px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile ticker — bounded VIEWPORT + out-of-flow TRACK               */
/*                                                                    */
/* ROOT CAUSE (doc width expansion while typing):                     */
/*   #rounded.main is display:table (table-layout:auto).              */
/*   #tickerAnchor { white-space:nowrap } contributed min-content     */
/*   width into the table. .mainhead { max-width:746px } then allowed */
/*   the shell to grow from ~viewport toward 746px (+ .main padding   */
/*   10+10 → document scrollWidth ~766). Fake “zoom/widen” effect.  */
/*                                                                    */
/* FIX:                                                               */
/*   1) Cap table/mainhead/left at 100% (override 746px).             */
/*   2) Flex basis 0% + width:0 on the clipping viewport.             */
/*   3) .ticker-track is position:absolute (out of flow) so its       */
/*      intrinsic width cannot expand any ancestor.                   */
/* ------------------------------------------------------------------ */

@media only screen and (max-width: 1030px) {
	/* Bound the display:table shell — must not grow with nowrap text */
	.main#rounded,
	.main {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.main .mainhead,
	.mainhead#roundedMTop,
	.mainhead {
		width: 100% !important;
		max-width: 100% !important; /* overrides fa.css 746px */
		box-sizing: border-box !important;
	}

	.main .mainhead .left {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	/*
	 * VISIBLE-GAP MODEL (live-DOM proven):
	 * While the sentence overflows both mask edges (most of the chase), the eye
	 * sees mask gutters — NOT targetX. Flex arrow +   on the right made
	 * RIGHT gutter ≫ LEFT gutter; changing end travel could not fix that.
	 * Fix: overlay the arrow, collapse whitespace nodes, equal band padding,
	 * mask full-width, equal track edge inset S on both travel ends.
	 */
	.main .mainhead .left .ticker,
	.ticker {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		margin-top: 10px !important;
		/* Equal physical breathing room from the visible band edges */
		padding: 0 10px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		line-height: 1.35 !important;
		/* Collapse literal    between img and anchor (flex space) */
		font-size: 0 !important;
	}

	.ticker > img {
		position: absolute !important;
		top: 50%;
		right: 6px; /* physical right; sits over padding, not in flex flow */
		left: auto;
		width: 9px;
		height: 9px;
		margin: 0 !important;
		padding: 0 !important;
		transform: translateY(-50%);
		z-index: 2;
		pointer-events: none;
		flex: none !important;
	}

	/* VIEWPORT / MASK — full band width; gutters come from .ticker padding */
	#tickerAnchor,
	a.MainHrefIframeTitle {
		flex: 1 1 0% !important;
		width: 0 !important;
		min-width: 0 !important;
		max-width: 100% !important;
		display: block !important;
		position: relative !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: clip !important;
		line-height: 1.35 !important;
		height: 1.35em !important;
		max-height: 1.35em !important;
		padding: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		font-size: 12.5px !important; /* restore after .ticker font-size:0 */
	}

	/* TRACK — out of flow; S matches band padding / travel end inset */
	#tickerAnchor .ticker-track {
		position: absolute;
		top: 0;
		right: 0; /* start flush to mask; band padding supplies visible S */
		left: auto;
		display: block;
		width: max-content;
		max-width: none;
		white-space: nowrap;
		transform: translateX(0);
		transition: none;
		pointer-events: none;
		box-sizing: border-box;
	}
}

@media only screen and (max-width: 1030px) and (prefers-reduced-motion: reduce) {
	#tickerAnchor .ticker-track {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Document Verification Guide TOC                                    */
/* ------------------------------------------------------------------ */

.document-guide-toc {
	direction: rtl;
	text-align: right;
	margin: 0 0 1em;
	padding: 0.65em 0.75em;
	background: #f3f7fb;
	border: 1px solid #c5d0da;
	border-radius: 4px;
	font-family: "Vazirmatn", Tahoma, Geneva, sans-serif;
	box-sizing: border-box;
}

.document-guide-toc-title {
	font-weight: 700;
	font-size: 1.05em;
	color: #036;
	margin: 0 0 0.45em;
}

.document-guide-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 1.25em;
}

.document-guide-toc li {
	break-inside: avoid;
	margin: 0 0 0.28em;
	padding: 0;
	line-height: 1.4;
}

.document-guide-toc a {
	color: #1a5f96;
	text-decoration: none;
	font-size: 12.5px;
}

.document-guide-toc a:hover,
.document-guide-toc a:focus-visible {
	text-decoration: underline;
	color: #930;
}

/* Mobile: three RTL levels — panel edge → TOC title → TOC items.
   Must beat legacy fa.css `.contentbox *:not(img){ padding:0 !important }`. */
@media only screen and (max-width: 767px) {
	.contentdata .document-guide-toc,
	.Description .document-guide-toc,
	.contentbox .document-guide-toc,
	.document-guide-toc {
		margin: 0 0 1em !important;
		/* Level 2 breathing from content panel right edge */
		padding: 0.7em 14px 0.75em 10px !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.contentbox .document-guide-toc ul,
	.document-guide-toc ul {
		columns: 1 !important;
		/* Level 3: additional inset relative to TOC title */
		padding-right: 16px !important;
		padding-left: 0 !important;
		margin-right: 0 !important;
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.contentbox .document-guide-toc-title,
	.document-guide-toc-title {
		padding-right: 0 !important;
		margin-right: 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}

	.contentbox .document-guide-toc li,
	.document-guide-toc li {
		padding-right: 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}

	/* Section headings further down the guide — panel breathing room */
	.contentbox .contentdata p.guide-section-heading,
	.contentbox .Description p.guide-section-heading,
	.contentdata p.guide-section-heading,
	.Description p.guide-section-heading,
	p.guide-section-heading {
		padding-right: 12px !important;
		padding-left: 8px !important;
		box-sizing: border-box !important;
		margin-right: 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}
}

@media only screen and (max-width: 600px) {
	.document-guide-toc ul {
		columns: 1;
	}
}

/* Anchor / in-page hash navigation. Back-to-Top JS forces scroll-behavior:auto
   during programmatic writes so CSS smooth does not fight the rAF scroller. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.guide-section-anchor {
	display: block;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Data table scroll containment (Official / Unofficial / Word)       */
/* ------------------------------------------------------------------ */

@media only screen and (max-width: 767px) {
	.main,
	.main > .container,
	.main > .container > .left,
	.contentbox,
	.contentbox > .content,
	.contentbox > .content .contentdata,
	.contentbox > .content .Description,
	.header,
	.body,
	.mid {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.header {
		width: 100% !important;
		background-size: cover;
		background-position: center top;
	}

	/* Page must not grow from tables — containment, not global hide-the-bug.
	   Explicit overflow-y (not default visible) avoids CSS pairing that turns
	   overflow-x:hidden into a vertical scrollport. */
	.contentbox > .content {
		overflow-x: visible !important;
		overflow-y: visible !important;
		max-width: 100%;
		min-width: 0;
	}

	/* contentbox is itself a <table> — fixed layout prevents cell min-content blowout */
	table.contentbox {
		table-layout: fixed !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	table.contentbox > tbody > tr > td,
	table.contentbox > tr > td {
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.contentbox > .content .contentdata,
	.contentbox > .content .Description {
		/* Outer must NOT be a scrollport — only .table-scroll-container scrolls X */
		overflow-x: visible !important;
		overflow-y: visible !important;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Undo legacy `.contentbox *:not(img){width:100%}` which breaks scroll wrappers */
	.contentbox .table-scroll-container,
	.contentbox .table-scroll-container * {
		width: auto !important;
		max-width: none;
		padding: revert;
	}

	.contentbox .table-scroll-container {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		/* Explicit axes: X scrolls, Y never becomes an inner scroller */
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		margin: 0.5em 0 0.85em;
		box-sizing: border-box !important;
		padding: 0 !important;
		height: auto !important;
		max-height: none !important;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.contentbox .table-scroll-container::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.contentbox .table-scroll-container > table.MsoNormalTable,
	.contentbox .table-scroll-container > table.MsoTableGrid,
	.contentbox .table-scroll-container > table {
		min-width: 520px !important;
		width: auto !important;
		max-width: none !important;
	}
}

@media only screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.table-scroll-container {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Back to top — mobile ~3× viewport; desktop ~2× (unchanged)         */
/* ------------------------------------------------------------------ */

.portal-back-to-top {
	position: fixed;
	/* Above .main { z-index:1000 } stacking context so content edge cannot clip it */
	z-index: 1200;
	bottom: 18px;
	left: 14px; /* RTL-friendly: away from typical right-side sticky controls */
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid #024a7a;
	border-radius: 4px;
	background: #036;
	background-image: linear-gradient(to bottom, #0470b8, #035a94);
	color: #fff;
	font-family: "Vazirmatn", Tahoma, Geneva, sans-serif;
	font-size: 11px;
	line-height: 1.2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none; /* must not intercept while hidden */
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0.25);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.portal-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.portal-back-to-top:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.portal-back-to-top:hover {
	background-image: linear-gradient(to bottom, #0580cc, #0368a8);
}

.portal-back-to-top-text {
	font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.portal-back-to-top {
		transition: none;
		transform: none;
	}
	.portal-back-to-top.is-visible {
		transform: none;
	}
}