/* Sharjah Archives - IT Department - A. Al Mualla */
/* verify.sa.gov.ae: UAE Government Design System palette and type (designsystem.gov.ae) */

@font-face { font-family: "Noto Kufi Arabic"; src: url("fonts/noto-kufi-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("fonts/noto-kufi-arabic-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("fonts/noto-kufi-arabic-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face {
	font-family: "Alexandria"; font-weight: 100 900; font-display: swap;
	src: url("fonts/alexandria-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "Alexandria"; font-weight: 100 900; font-display: swap;
	src: url("fonts/alexandria-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto"; font-weight: 100 900; font-display: swap;
	src: url("fonts/roboto-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
	--gold-50: #F9F7ED; --gold-100: #F2ECCF; --gold-200: #E6D7A2; --gold-300: #D7BC6D; --gold-500: #B68A35;
	--gold-600: #92722A; --gold-700: #7C5E24;
	--black-50: #F7F7F7; --black-100: #E1E3E5; --black-200: #C3C6CB; --black-400: #797E86;
	--black-500: #5F646D; --black-600: #4B4F58; --black-800: #232528; --black-900: #1B1D21;
	--green-700: #2F663C; --red-700: #B52520;
	--page: #EFEEEA;
	--focus: #92722A;
	--paper-shadow: 0 1px 2px rgba(27, 29, 33, .06), 0 18px 40px rgba(27, 29, 33, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
	min-height: 100vh; display: flex; flex-direction: column;
	background: var(--page); color: var(--black-800);
	font-family: "Noto Kufi Arabic", "Roboto", sans-serif; font-size: 16px; line-height: 1.6;
}
html[lang="en"] body { font-family: "Roboto", "Noto Kufi Arabic", sans-serif; }
h1, h2 { font-family: "Alexandria", "Noto Kufi Arabic", sans-serif; font-weight: 800; }
html[lang="en"] h1, html[lang="en"] h2 { font-family: "Roboto", sans-serif; }
html[dir="rtl"] body { text-align: right; }
html[dir="ltr"] body { text-align: left; }
a { color: var(--gold-700); text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
bdi { unicode-bidi: isolate; }
.i { width: 20px; height: 20px; fill: currentColor; flex: none; }
.code { font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 600; letter-spacing: .5px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.9; color: var(--black-600); background: var(--black-100); border-radius: 12px; padding: 0 10px; }

/* header */
.top { background: #fff; border-bottom: 1px solid var(--black-100); }
.top-in { max-width: 900px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand img { height: 54px; width: auto; display: block; }
.top-end { display: flex; align-items: center; gap: 10px; }
.lang {
	display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--black-100); border-radius: 999px;
	padding: 4px 14px; font-size: 14px; font-weight: 600; color: var(--black-800); text-decoration: none;
}
.lang:hover { border-color: var(--gold-300); background: var(--gold-50); }
.lang .i { width: 18px; height: 18px; }

/* content */
main { flex: 1; padding: 28px 24px 48px; }
.wrap { max-width: 900px; margin: 0 auto; }

/* the answer, first */
.verdict { display: flex; align-items: center; gap: 14px; color: #fff; border-radius: 14px; padding: 16px 22px; }
.verdict.ok { background: var(--green-700); }
.verdict.bad { background: var(--red-700); }
.verdict.warn { background: var(--gold-700); }
.verdict > .i { width: 34px; height: 34px; }
.verdict h1 { font-size: 21px; line-height: 1.35; }
.verdict-txt { min-width: 0; }
.verdict-txt p { font-size: 14px; color: rgba(255, 255, 255, .92); }
.verdict-txt .entered { margin-top: 6px; }
.verdict-txt .entered .code { color: #fff; background: rgba(255, 255, 255, .16); border-radius: 6px; padding: 1px 8px; }
.when {
	margin-inline-start: auto; display: flex; align-items: center; gap: 6px; font-size: 13px;
	background: rgba(255, 255, 255, .14); padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.when .i { width: 15px; height: 15px; }

/* paper with the gold double frame, used for the document and the home page */
.framed { position: relative; background: #fff; box-shadow: var(--paper-shadow); }
.framed::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--gold-200); pointer-events: none; }
.framed::after { content: ""; position: absolute; inset: 16px; border: 1px solid var(--gold-100); pointer-events: none; }
.rule { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rule::before, .rule::after { content: ""; height: 1px; width: 90px; background: var(--gold-300); }
.rule span { width: 8px; height: 8px; background: var(--gold-500); transform: rotate(45deg); }

/* the document, laid out like the paper it describes */
.sheet { overflow: hidden; margin-top: 18px; padding: 44px 56px 36px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.sheet-logo { height: 58px; width: auto; display: block; }
.refs { font-size: 13px; color: var(--black-500); text-align: end; }
.refs b { display: block; color: var(--black-800); font-family: "IBM Plex Mono", Consolas, monospace; font-size: 15px; font-weight: 600; }
.doc-title { text-align: center; margin: 30px 0 6px; font-size: 27px; line-height: 1.4; color: var(--black-900); }
.sheet .rule { margin-bottom: 26px; }
.sheet-body { display: flex; align-items: center; gap: 32px; }
.facts { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.facts dt { font-size: 13px; color: var(--black-500); }
.facts dd { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.seal {
	flex: none; width: 128px; height: 128px; border-radius: 50%; border: 3px double var(--gold-600); color: var(--gold-700);
	display: grid; place-items: center; text-align: center; transform: rotate(-9deg); background: var(--gold-50);
}
.seal .i { width: 34px; height: 34px; fill: var(--gold-600); display: block; margin: 0 auto 2px; }
.seal b { display: block; font-family: "Alexandria", "Noto Kufi Arabic", sans-serif; font-weight: 800; font-size: 15px; line-height: 1.2; }
.seal small { display: block; font-size: 10px; font-weight: 600; margin-top: 2px; }
html[lang="en"] .seal b { font-family: "Roboto", sans-serif; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; }
.sheet-foot {
	margin-top: 30px; border-top: 1px dashed var(--gold-300); padding-top: 18px; display: flex; flex-wrap: wrap;
	gap: 16px 24px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--black-600);
}
.sheet-foot .c { display: flex; gap: 10px; align-items: center; }
.sheet-foot .c .i { width: 30px; height: 30px; fill: var(--black-800); }
.sheet-foot .c b { display: block; font-size: 17px; color: var(--black-800); }
.sheet-foot .s { display: flex; gap: 8px; align-items: center; max-width: 380px; }
.sheet-foot .s .i { fill: var(--gold-600); }
.void .doc-title, .void .facts dd { color: var(--black-400); }
.stamp { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.stamp span {
	font-family: "Alexandria", "Noto Kufi Arabic", sans-serif; font-weight: 900; font-size: 104px; line-height: 1;
	border: 8px solid; border-radius: 18px; padding: 6px 30px 18px; transform: rotate(-14deg); white-space: nowrap;
}
.stamp.bad span { color: rgba(181, 37, 32, .16); }
.stamp.warn span { color: rgba(124, 94, 36, .2); }
html[lang="en"] .stamp span { font-family: "Roboto", sans-serif; font-size: 64px; letter-spacing: 6px; padding: 10px 26px; }

.note { margin-top: 18px; display: flex; gap: 12px; background: #fff; border: 1px solid var(--black-100); border-radius: 12px; padding: 14px 18px; font-size: 15px; }
.note .i { margin-top: 3px; fill: var(--gold-600); }
.note.bad .i { fill: var(--red-700); }
.note.warn .i { fill: var(--gold-700); }

/* code form */
.panel { margin-top: 22px; background: #fff; border: 1px solid var(--black-100); border-radius: 12px; padding: 18px 20px; }
.ask label { display: block; font-weight: 600; }
.ask .hint { font-size: 14px; color: var(--black-500); margin-bottom: 10px; }
.ask .row { display: flex; gap: 10px; }
.ask input {
	flex: 1; min-width: 0; height: 48px; border: 1px solid var(--black-200); border-radius: 10px; padding: 0 14px;
	font: 600 17px "IBM Plex Mono", Consolas, monospace; letter-spacing: .5px; color: var(--black-800); background: #fff;
	text-align: left; text-transform: uppercase;
}
.ask input::placeholder { color: var(--black-400); text-transform: none; }
.ask button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 0; border-radius: 10px;
	padding: 0 22px; background: var(--gold-600); color: #fff; cursor: pointer; white-space: nowrap;
	font: 700 16px "Noto Kufi Arabic", "Roboto", sans-serif;
}
html[lang="en"] .ask button { font-family: "Roboto", sans-serif; }
.ask button .i { fill: #fff; }
.ask button:hover { background: var(--gold-700); }

/* home: the landing page */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 44px; align-items: center; padding: 52px 56px 48px; }
.hero-txt, .hero-doc { position: relative; z-index: 1; }
.kicker {
	display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gold-700);
	background: var(--gold-50); border: 1px solid var(--gold-100); border-radius: 16px; padding: 4px 14px;
}
.kicker .i { width: 18px; height: 18px; fill: var(--gold-600); }
.hero h1 { font-size: 32px; line-height: 1.35; color: var(--black-900); margin-top: 16px; }
.rule.start { justify-content: flex-start; margin: 12px 0 14px; }
.rule.start::before { display: none; }
.hero .lead { color: var(--black-600); font-size: 17px; max-width: 520px; }
.hero .ask { margin-top: 26px; }
.hero-doc { margin: 0; }
.mini {
	background: #fff; border: 1px solid var(--black-100); box-shadow: var(--paper-shadow); padding: 22px 22px 20px;
	transform: rotate(-2.5deg);
}
html[dir="ltr"] .mini { transform: rotate(2.5deg); }
.mini img { display: block; height: 34px; width: auto; }
.mini .bar { display: block; height: 7px; border-radius: 4px; background: var(--black-100); margin-top: 10px; }
.mini .bar.title { height: 11px; width: 64%; margin: 20px auto 16px; background: var(--black-200); }
.mini .bar.short { width: 58%; }
.qr-spot {
	width: 172px; margin-top: 20px; margin-inline-start: auto; padding: 10px 10px 8px; text-align: center;
	border: 2px dashed var(--gold-500); border-radius: 10px; background: var(--gold-50);
}
.qr-art { display: block; width: 92px; height: 92px; margin: 0 auto; fill: var(--black-900); background: #fff; }
.qr-spot .code { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0; white-space: nowrap; color: var(--black-800); }
.hero-doc figcaption { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--gold-700); }
.hero-doc figcaption .i { width: 18px; height: 18px; fill: var(--gold-600); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 12px; font-weight: 600; line-height: 1.9; border-radius: 999px; padding: 0 10px; }
.chip.ok { color: var(--green-700); background: #EAF3EC; }
.chip.warn { color: var(--gold-700); background: var(--gold-50); }
.chip.bad { color: var(--red-700); background: #FBECEB; }

/* about */
.intro { padding: 48px 56px 40px; text-align: center; }
.intro.small { padding: 40px 56px 32px; }
.emblem {
	width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
	background: var(--gold-50); border: 1px solid var(--gold-200);
}
.emblem .i { width: 34px; height: 34px; fill: var(--gold-600); }
.intro h1 { font-size: 28px; line-height: 1.4; color: var(--black-900); margin-bottom: 8px; }
.intro .rule { margin-bottom: 16px; }
.intro .lead { max-width: 560px; margin: 0 auto; color: var(--black-600); }
.intro .ask { position: relative; z-index: 1; max-width: 580px; margin: 26px auto 0; }
html[dir="rtl"] .intro .ask { text-align: right; }
html[dir="ltr"] .intro .ask { text-align: left; }
.steps-h { font-size: 17px; margin: 30px 0 12px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps li { display: flex; gap: 12px; background: #fff; border: 1px solid var(--black-100); border-radius: 12px; padding: 16px 18px; }
.steps .n { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-50); }
.steps .n .i { fill: var(--gold-600); }
.steps b { display: block; font-size: 15px; }
.steps p { font-size: 14px; color: var(--black-500); }
.h2 { font-size: 19px; margin-bottom: 10px; }
.release { padding: 12px 0; border-top: 1px solid var(--black-100); }
.release:first-of-type { border-top: 0; padding-top: 0; }
.rel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.rel-head .date { color: var(--black-500); font-size: 14px; }
.release ul { padding-inline-start: 22px; }
.release li { margin: 3px 0; }
.back { margin-top: 18px; text-align: center; }

/* footer */
footer { padding: 22px 24px; text-align: center; font-size: 13px; color: var(--black-500); }
footer .host { color: var(--black-800); font-weight: 700; }
footer .meta { margin-top: 4px; }

@media (max-width: 700px) {
	.top-in { padding: 10px 16px; }
	.brand img { height: 44px; }
	main { padding: 16px 12px 32px; }
	.verdict { flex-wrap: wrap; padding: 14px 16px; gap: 8px 12px; }
	.verdict-txt { flex: 1 1 100%; }
	.verdict h1 { font-size: 18px; }
	.when { margin-inline-start: 0; white-space: normal; }
	.sheet { padding: 34px 26px 26px; }
	.sheet-logo { height: 40px; }
	.refs b { font-size: 13px; }
	.doc-title { font-size: 21px; margin-top: 22px; }
	.sheet .rule { margin-bottom: 18px; }
	.rule::before, .rule::after { width: 50px; }
	.sheet-body { flex-direction: column; align-items: stretch; gap: 18px; }
	.facts { grid-template-columns: 1fr; gap: 12px; }
	.facts dd { font-size: 16px; }
	.seal { width: 104px; height: 104px; margin: 0 auto; }
	.stamp span { font-size: 52px; padding: 4px 16px 10px; border-width: 5px; }
	html[lang="en"] .stamp span { font-size: 36px; letter-spacing: 3px; padding: 8px 16px; }
	.note { padding: 14px 16px; }
	.panel { padding: 16px 14px; }
	.ask .row { flex-direction: column; }
	.ask input { flex: none; }
	.ask button { width: 100%; }
	.intro, .intro.small { padding: 36px 24px 28px; }
	.hero { grid-template-columns: 1fr; gap: 30px; padding: 34px 24px 30px; }
	.hero h1 { font-size: 24px; }
	.hero .lead { font-size: 16px; }
	.hero-doc { max-width: 236px; margin: 0 auto; }
	.kicker { font-size: 13px; padding: 4px 12px; }
	.intro h1 { font-size: 22px; }
	.steps { grid-template-columns: 1fr; }
	footer { padding: 18px 16px; }
}

@media print {
	.panel, .lang, .steps-h, .steps, .hero-doc, .hero .ask { display: none; }
	body { background: #fff; }
	.verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.framed { box-shadow: none; }
}