/* ==========================================================================
   PPCs of India — Design System
   A single source of truth for colour, type, spacing and elevation.
   Loaded by every page via <ppc-head> / direct <link>.
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- Design tokens ---------- */
:root {
	/* Brand palette — drawn from the site seal (India Post blue, saffron, green) */
	--ppc-blue-900: #0a2540;
	--ppc-blue-800: #10395e;
	--ppc-blue-700: #17507f;
	--ppc-blue-600: #1e6aa3;
	--ppc-blue-500: #2b83c4;
	--ppc-blue-100: #e3eef7;
	--ppc-blue-050: #f2f7fb;

	--ppc-saffron: #ef7f1a;
	--ppc-saffron-dark: #cc6608;
	--ppc-saffron-050: #fff4e8;
	--ppc-green: #1a7f4b;
	--ppc-green-050: #eaf6ef;

	/* Semantic surface + text roles (light theme defaults) */
	--surface-page: #f6f7f9;
	--surface-card: #ffffff;
	--surface-sunken: #eef1f5;
	--surface-header: rgba(255, 255, 255, 0.82);
	--surface-inverse: var(--ppc-blue-900);

	--text-strong: #0d1b2a;
	--text-body: #33404f;
	--text-muted: #64748b;
	--text-on-dark: #eef4fa;
	--text-on-dark-muted: #a9bdd1;

	--accent: var(--ppc-blue-700);
	--accent-hover: var(--ppc-blue-600);
	--accent-contrast: #ffffff;

	--border: #dfe4ea;
	--border-strong: #c4ccd6;

	/* Typography */
	--font-display: 'Fraunces', 'Merriweather', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
	--step-0: clamp(0.95rem, 0.92rem + 0.17vw, 1.05rem);
	--step-1: clamp(1.13rem, 1.06rem + 0.34vw, 1.33rem);
	--step-2: clamp(1.35rem, 1.22rem + 0.63vw, 1.75rem);
	--step-3: clamp(1.62rem, 1.38rem + 1.10vw, 2.30rem);
	--step-4: clamp(1.94rem, 1.53rem + 1.85vw, 3.05rem);

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* Radii + elevation */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
	--shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.08), 0 1px 2px rgba(13, 27, 42, 0.04);
	--shadow-md: 0 4px 12px rgba(13, 27, 42, 0.09), 0 2px 4px rgba(13, 27, 42, 0.05);
	--shadow-lg: 0 12px 32px rgba(13, 27, 42, 0.13), 0 4px 8px rgba(13, 27, 42, 0.06);

	--header-height: 68px;
	--content-max: 1140px;
	--prose-max: 72ch;

	--ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Dark theme ---------- */
:root[data-theme='dark'] {
	--surface-page: #0d1420;
	--surface-card: #161f2e;
	--surface-sunken: #1d2837;
	--surface-header: rgba(16, 24, 37, 0.85);
	/* Deliberately *lighter* than --surface-page so the footer stays a
	   distinct band in dark mode instead of blending into the page. */
	--surface-inverse: #1b2636;

	--text-strong: #f1f5fa;
	--text-body: #c6d2e0;
	--text-muted: #8d9db1;

	--accent: #6fb4e8;
	--accent-hover: #94c9f2;
	--accent-contrast: #08131f;

	--border: #2a3646;
	--border-strong: #3b4b60;

	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
	--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);

	color-scheme: dark;
}

/* Follow the OS when the visitor has expressed no preference */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']):not([data-theme='dark']) {
		--surface-page: #0d1420;
		--surface-card: #161f2e;
		--surface-sunken: #1d2837;
		--surface-header: rgba(16, 24, 37, 0.85);
		--surface-inverse: #1b2636;

		--text-strong: #f1f5fa;
		--text-body: #c6d2e0;
		--text-muted: #8d9db1;

		--accent: #6fb4e8;
		--accent-hover: #94c9f2;
		--accent-contrast: #08131f;

		--border: #2a3646;
		--border-strong: #3b4b60;

		--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
		--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
		--shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);

		color-scheme: dark;
	}
}

/* ==========================================================================
   Base / reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.7;
	color: var(--text-body);
	background-color: var(--surface-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Subtle page texture so large text blocks don't sit on flat white */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(900px circle at 12% -5%, color-mix(in srgb, var(--ppc-blue-500) 9%, transparent), transparent 60%),
		radial-gradient(700px circle at 95% 8%, color-mix(in srgb, var(--ppc-saffron) 7%, transparent), transparent 55%);
}

@supports not (background: color-mix(in srgb, red, blue)) {
	body::after {
		background: none;
	}
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	color: var(--text-strong);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}

h1 {
	font-size: var(--step-4);
	text-align: center;
	margin-block: var(--space-6) var(--space-5);
}

h2 {
	font-size: var(--step-3);
}

h3 {
	font-size: var(--step-2);
	margin-top: var(--space-6);
}

h4 {
	font-size: var(--step-1);
	margin-top: var(--space-5);
}

h5,
h6 {
	font-size: var(--step-0);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-weight: 600;
}

p {
	margin: 0 0 var(--space-4);
	text-align: left;
	hyphens: auto;
}

strong,
b {
	color: var(--text-strong);
	font-weight: 600;
}

ul,
ol {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-5);
}

li {
	margin-bottom: var(--space-2);
}

/* Inline links — legible, not shouty */
a {
	color: var(--accent);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color 0.18s var(--ease);
}

a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: var(--space-6) 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.ppc-main {
	flex: 1 0 auto;
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: var(--space-6) var(--space-8);
}

/* Bootstrap's .container is still used across the site — retune it */
.container,
.ppc-container {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: clamp(var(--space-4), 4vw, var(--space-6));
	position: relative;
	z-index: 1;
}

/* Long-form reading column */
.ppc-prose > p,
.ppc-prose > ul,
.ppc-prose > ol {
	max-width: var(--prose-max);
	margin-inline: auto;
}

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */
.ppc-card {
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(var(--space-4), 3vw, var(--space-6));
	box-shadow: var(--shadow-sm);
}

.ppc-panel {
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: clamp(var(--space-5), 4vw, var(--space-7));
	box-shadow: var(--shadow-md);
}

.ppc-grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Callout / note block */
.ppc-note {
	border-left: 4px solid var(--accent);
	background: var(--surface-sunken);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin-block: var(--space-5);
}

.ppc-note--warn {
	border-left-color: var(--ppc-saffron);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ppc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 500;
	line-height: 1;
	padding: 0.7em 1.35em;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
		transform 0.18s var(--ease), box-shadow 0.18s var(--ease), color 0.18s var(--ease);
}

.ppc-btn--primary {
	background: var(--accent);
	color: var(--accent-contrast);
	box-shadow: var(--shadow-sm);
}

.ppc-btn--primary:hover {
	background: var(--accent-hover);
	color: var(--accent-contrast);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
	text-decoration: none;
}

.ppc-btn--ghost {
	background: transparent;
	color: var(--text-body);
	border-color: var(--border-strong);
}

.ppc-btn--ghost:hover {
	background: var(--surface-sunken);
	color: var(--text-strong);
	border-color: var(--accent);
	text-decoration: none;
}

.ppc-btn:active {
	transform: translateY(0);
}

/* ==========================================================================
   Tables — used heavily by the PPC list & data pages
   ========================================================================== */
.table-container,
.ppc-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-block: var(--space-5);
}

.table-container table,
.ppc-table-wrap table,
.info-table,
.data-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--step--1);
	background: transparent;
}

.table-container th,
.table-container td,
.ppc-table-wrap th,
.ppc-table-wrap td,
.info-table th,
.info-table td,
.data-table th,
.data-table td {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: middle;
}

.table-container th,
.ppc-table-wrap th,
.info-table th,
.data-table th {
	background: var(--surface-sunken);
	color: var(--text-strong);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--step--1);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	position: sticky;
	top: 0;
	z-index: 2;
	white-space: nowrap;
}

.table-container tr:last-child td,
.ppc-table-wrap tr:last-child td,
.info-table tr:last-child td,
.data-table tr:last-child td {
	border-bottom: 0;
}

.table-container tbody tr,
.ppc-table-wrap tbody tr {
	transition: background-color 0.15s var(--ease);
}

.table-container tbody tr:nth-child(even),
.ppc-table-wrap tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--surface-sunken) 45%, transparent);
}

.table-container tbody tr:hover,
.ppc-table-wrap tbody tr:hover {
	background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* info-table on blog pages is a 2-column key/value sheet */
.info-table {
	max-width: 620px;
	margin-inline: auto;
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.info-table th {
	width: 38%;
	position: static;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--step-0);
	white-space: normal;
}

.data-table {
	max-width: 860px;
	margin-inline: auto;
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.data-table th,
.data-table td {
	text-align: center;
}

.data-table th {
	position: static;
}

/* ==========================================================================
   Images / galleries (blog pages)
   ========================================================================== */
.overview-images {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--space-5);
	margin-block: var(--space-6);
}

.overview-images > * {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.overview-images img {
	display: block;
	margin-inline: auto;
	max-width: 100%;
	height: auto;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--surface-card);
	box-shadow: var(--shadow-md);
	cursor: zoom-in;
	transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.overview-images img:hover {
	transform: translateY(-3px) scale(1.008);
	box-shadow: var(--shadow-lg);
}

/* Preserve the existing size classes, expressed responsively.
   Each class states the intended aspect ratio and lets object-fit letterbox
   the image inside it, so scans that are not exactly that ratio are shown
   whole rather than stretched. */
.overview-images img {
	object-fit: contain;
}

.overview-images img.yellowcard { width: 450px; aspect-ratio: 3 / 2; }
.overview-images img.horizontal { width: 300px; aspect-ratio: 3 / 2; }
.overview-images img.vertical { width: 200px; aspect-ratio: 2 / 3; }
.overview-images img.squaresmall { width: 300px; aspect-ratio: 1; }
.overview-images img.squarebig { width: 500px; aspect-ratio: 1; }
.overview-images img.horizontalbig { width: 400px; aspect-ratio: 2 / 1; }
.overview-images img.verticalbig { width: 200px; aspect-ratio: 1 / 2; }
.overview-images img.landscape { width: 900px; aspect-ratio: 3 / 2; }
.overview-images img.portrait { width: 400px; aspect-ratio: 2 / 3; }

.credits {
	margin-top: var(--space-2);
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-style: normal;
	font-weight: 500;
	color: var(--text-muted);
	max-width: 100%;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.center,
.ppc-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.text-center { text-align: center; }
.ppc-muted { color: var(--text-muted); }
.ppc-stack > * + * { margin-top: var(--space-4); }

.ppc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link for keyboard users */
.ppc-skip-link {
	position: absolute;
	left: var(--space-4);
	top: -100px;
	z-index: 2000;
	background: var(--accent);
	color: var(--accent-contrast);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-weight: 500;
	transition: top 0.2s var(--ease);
}

.ppc-skip-link:focus {
	top: var(--space-4);
	color: var(--accent-contrast);
	text-decoration: none;
}

/* ==========================================================================
   Watermark — the main site logo, overlaid in the FOREGROUND
   --------------------------------------------------------------------------
   Sits above the page content (including images) so it cannot be cropped out
   of a screen capture. pointer-events:none keeps it purely visual: clicks,
   selection and scrolling all pass straight through to the content beneath.
   Opacity is kept low enough to stay readable over text.
   ========================================================================== */
body::before {
	content: '';
	position: fixed;
	top: 50%;
	left: 50%;
	width: clamp(200px, 30vw, 380px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: var(--ppc-watermark, none) no-repeat center center;
	background-size: contain;
	opacity: 0.14;
	/* Above site chrome (header 1000, footer 2) and all page content. */
	z-index: 4000;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

:root[data-theme='dark'] body::before {
	opacity: 0.18;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) body::before {
		opacity: 0.18;
	}
}

/* The lightbox is a full-screen overlay; keep the mark on top there too. */
.ppc-lightbox {
	z-index: 3000;
}

/* ==========================================================================
   Floating action buttons (back / share) — restyled
   ========================================================================== */
.back-button {
	position: fixed;
	bottom: var(--space-5);
	right: var(--space-5);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--accent);
	color: var(--accent-contrast);
	border: 0;
	padding: 0.75em 1.35em;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 500;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: background-color 0.18s var(--ease), transform 0.18s var(--ease),
		box-shadow 0.18s var(--ease);
}

.back-button:hover {
	background: var(--accent-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.share-menu {
	position: fixed;
	bottom: var(--space-5);
	left: var(--space-5);
	z-index: 900;
}

#share-button,
.share-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--surface-card);
	color: var(--text-strong);
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: background-color 0.18s var(--ease), transform 0.18s var(--ease),
		box-shadow 0.18s var(--ease);
}

#share-button {
	position: fixed;
	bottom: var(--space-5);
	left: var(--space-5);
	font-size: 0;
}

#share-button::before {
	content: '';
	width: 20px;
	height: 20px;
	background: currentColor;
	/* share glyph, inlined so it never depends on a remote asset */
	-webkit-mask: var(--ppc-share-icon) no-repeat center / contain;
	mask: var(--ppc-share-icon) no-repeat center / contain;
}

#share-button:hover,
.share-button:hover {
	background: var(--accent);
	color: var(--accent-contrast);
	border-color: var(--accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.share-button img {
	width: 20px;
	height: 20px;
	border: 0;
}

#share-menu,
.dropdown-content {
	position: fixed;
	bottom: calc(var(--space-5) + 60px);
	left: var(--space-5);
	min-width: 200px;
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2);
	display: none;
	overflow: hidden;
	z-index: 901;
}

#share-menu.visible,
.share-menu:hover .dropdown-content {
	display: block;
}

#share-menu a,
.dropdown-content a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	color: var(--text-body);
	font-size: var(--step--1);
	text-decoration: none;
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

#share-menu a:hover,
.dropdown-content a:hover {
	background: var(--surface-sunken);
	color: var(--text-strong);
	text-decoration: none;
}

#share-menu a img,
.dropdown-content a img {
	width: 18px;
	height: 18px;
	border: 0;
	flex: none;
}

/* ==========================================================================
   Motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	:root {
		--surface-page: #fff;
		--surface-card: #fff;
		--surface-sunken: #fff;
	}

	body {
		background: #fff;
		color: #000;
	}

	body::after {
		display: none;
	}

	body::before {
		opacity: 0.1;
		position: fixed;
	}

	.ppc-header,
	.ppc-footer,
	.back-button,
	.go-to-top,
	.share-menu,
	#share-button,
	#share-menu,
	.ppc-theme-toggle,
	.ppc-to-top,
	.ppc-skip-link,
	.home-icon {
		display: none !important;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	.ppc-card,
	.ppc-panel,
	.table-container,
	.info-table,
	.data-table {
		box-shadow: none;
		border: 1px solid #999;
	}

	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ==========================================================================
   Bootstrap compatibility layer
   --------------------------------------------------------------------------
   The site previously pulled in Bootstrap 4 purely for a handful of grid,
   form, button and table classes. Those classes are re-implemented here in the
   new design language so the existing markup keeps working without the 200KB
   CDN dependency (and without the local-file loading problems it brought).
   ========================================================================== */

/* ---- Grid ---- */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(-1 * var(--space-3));
}

.row > [class*='col-'],
.row > .col {
	padding-inline: var(--space-3);
	margin-bottom: var(--space-5);
	width: 100%;
}

.col { flex: 1 0 0%; }

@media (min-width: 768px) {
	.col-md-1 { width: 8.3333%; }
	.col-md-2 { width: 16.6667%; }
	.col-md-3 { width: 25%; }
	.col-md-4 { width: 33.3333%; }
	.col-md-6 { width: 50%; }
	.col-md-8 { width: 66.6667%; }
	.col-md-9 { width: 75%; }
	.col-md-12 { width: 100%; }
}

/* ---- Forms ---- */
.form-control,
select.form-control,
input[type='text'],
input[type='search'],
select {
	display: block;
	width: 100%;
	padding: 0.65em 0.9em;
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.5;
	color: var(--text-body);
	background-color: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
	appearance: none;
}

select.form-control,
select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px;
	padding-right: 2.25rem;
	cursor: pointer;
}

.form-control::placeholder,
input::placeholder {
	color: var(--text-muted);
}

.form-control:focus,
input[type='text']:focus,
input[type='search']:focus,
select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---- Input group ---- */
.input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.input-group > .form-control {
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group-append {
	display: flex;
	margin-left: -1px;
}

.input-group-append .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.65em 1.2em;
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 500;
	line-height: 1.5;
	color: var(--text-body);
	background-color: transparent;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.16s var(--ease), color 0.16s var(--ease),
		border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
		transform 0.16s var(--ease);
}

.btn:hover {
	background-color: var(--surface-sunken);
	color: var(--text-strong);
	border-color: var(--accent);
	text-decoration: none;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--accent-contrast);
	box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--accent-contrast);
	box-shadow: var(--shadow-md);
}

.btn-outline-secondary {
	color: var(--text-muted);
	border-color: var(--border-strong);
}

.btn-outline-secondary:hover {
	background-color: var(--surface-sunken);
	color: var(--text-strong);
}

/* ---- Tables ---- */
.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-block: var(--space-5);
}

table.table,
table.table-bordered,
table.table-striped {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--step--1);
	margin: 0;
}

table.table th,
table.table td,
table.table-bordered th,
table.table-bordered td,
table.table-striped th,
table.table-striped td {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: middle;
}

table.table th,
table.table-bordered th,
table.table-striped th {
	background: var(--surface-sunken);
	color: var(--text-strong);
	font-weight: 600;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 2;
}

table.table-striped tbody tr:nth-of-type(odd) {
	background-color: color-mix(in srgb, var(--surface-sunken) 45%, transparent);
}

table.table tbody tr:hover,
table.table-striped tbody tr:hover {
	background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---- Dropdown (markup retained on some pages) ---- */
.dropdown { position: relative; }

.dropdown-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1000;
	min-width: 200px;
	max-height: 320px;
	overflow-y: auto;
	padding: var(--space-2);
	margin: 0;
	list-style: none;
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	display: none;
}

.dropdown-menu.show { display: block; }

.dropdown-item {
	display: block;
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--text-body);
	font-size: var(--step--1);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--surface-sunken);
	color: var(--text-strong);
	text-decoration: none;
}

/* ---- Spacing / display utilities actually used in the markup ---- */
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-4) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-4) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mx-auto { margin-inline: auto !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.w-100 { width: 100% !important; }

/* ==========================================================================
   Overflow guards
   --------------------------------------------------------------------------
   Wide data tables and long unbroken strings must scroll inside their own
   container, never widen the page.
   ========================================================================== */
html,
body {
	max-width: 100%;
}

.ppc-main > .container,
.ppc-main > .ppc-container {
	min-width: 0;
}

/* Tables are the main source of wide content on this site. */
.table-container,
.table-responsive,
.ppc-table-wrap {
	max-width: 100%;
}

/* Images inside table cells should never blow out the column. */
table img {
	max-width: 140px;
	height: auto;
	border-radius: var(--radius-sm);
}

/* Alt-text of a missing image should not stretch a cell. */
table td {
	overflow-wrap: break-word;
}

/* Page-level <header> (content heading, not the site chrome) */
.ppc-page-header {
	padding-block: var(--space-6) 0;
	background: transparent;
	color: inherit;
	position: relative;
	z-index: 1;
}

.ppc-page-header h1 {
	margin-bottom: 0;
}

/* Pages built from <main><section> rather than .container */
main.ppc-main > .ppc-container > section {
	margin-bottom: var(--space-5);
}

/* Keep the floating controls clear of each other and inside the viewport */
@media (max-width: 560px) {
	.back-button {
		right: var(--space-3);
		bottom: var(--space-3);
		padding: 0.6em 1em;
		font-size: var(--step--1);
	}

	.share-menu,
	#share-button {
		left: var(--space-3);
		bottom: var(--space-3);
	}

	#share-menu,
	.dropdown-content {
		left: var(--space-3);
		bottom: calc(var(--space-3) + 58px);
	}
}

/* ==========================================================================
   Status colour legibility in dark mode
   --------------------------------------------------------------------------
   The PPC list and special-cancellation pages colour rows by status using the
   plain CSS keywords green/blue/red/orange. Those are too dark to read on a
   dark background, so they are lifted here. The status *meaning* (and the
   light-theme appearance) is unchanged.
   ========================================================================== */
:root[data-theme='dark'] .Working td,
:root[data-theme='dark'] .filter-container .Working input[type='checkbox'] + span {
	color: #4ade80 !important;
}

:root[data-theme='dark'] .Doubtful td,
:root[data-theme='dark'] .filter-container .Doubtful input[type='checkbox'] + span {
	color: #7dd3fc !important;
}

:root[data-theme='dark'] .Removed td,
:root[data-theme='dark'] .filter-container .Removed input[type='checkbox'] + span {
	color: #fca5a5 !important;
}

:root[data-theme='dark'] .Replaced td,
:root[data-theme='dark'] .filter-container .Replaced input[type='checkbox'] + span {
	color: #fcd34d !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .Working td,
	:root:not([data-theme='light']) .filter-container .Working input[type='checkbox'] + span {
		color: #4ade80 !important;
	}

	:root:not([data-theme='light']) .Doubtful td,
	:root:not([data-theme='light']) .filter-container .Doubtful input[type='checkbox'] + span {
		color: #7dd3fc !important;
	}

	:root:not([data-theme='light']) .Removed td,
	:root:not([data-theme='light']) .filter-container .Removed input[type='checkbox'] + span {
		color: #fca5a5 !important;
	}

	:root:not([data-theme='light']) .Replaced td,
	:root:not([data-theme='light']) .filter-container .Replaced input[type='checkbox'] + span {
		color: #fcd34d !important;
	}
}

/* The filter chips carry their own white background from the page's CSS. */
:root[data-theme='dark'] .filter-container label {
	background-color: var(--surface-card) !important;
	border-color: var(--border) !important;
	color: var(--text-body);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .filter-container label {
		background-color: var(--surface-card) !important;
		border-color: var(--border) !important;
		color: var(--text-body);
	}
}

/* ==========================================================================
   Wide data tables
   --------------------------------------------------------------------------
   The PPC list and special-cancellation tables carry 7-8 columns. They are
   allowed to break out of the reading measure and use the window width, so the
   details fit without sliding back and forth.
   ========================================================================== */
.ppc-table-wide {
	width: calc(100vw - 2 * clamp(var(--space-3), 2.5vw, var(--space-6)));
	max-width: calc(100vw - 2 * clamp(var(--space-3), 2.5vw, var(--space-6)));
	margin-inline: calc(50% - 50vw + clamp(var(--space-3), 2.5vw, var(--space-6)));
}

/* Let the columns size to their content and use the extra room. */
.ppc-table-wide > table {
	width: 100%;
	table-layout: auto;
}

/* Long place names should wrap rather than force the table wider. */
.ppc-table-wide th,
.ppc-table-wide td {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}

/* Keep the serial-number and pincode columns tight. */
.ppc-cards td[data-label='S. No.'],
.ppc-cards td[data-label='S. NO.'],
.ppc-cards th[data-label='S. No.'] {
	white-space: nowrap;
	width: 1%;
}

/* Thumbnails in the image column */
.ppc-table-wide td img {
	max-width: 150px;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	border-radius: var(--radius-sm);
	background: var(--surface-sunken);
}

/* ==========================================================================
   Card layout for data tables on narrow screens
   --------------------------------------------------------------------------
   Each row becomes a tile: the column heading sits on the left and the value
   on the right, so there is no horizontal scrolling at all. Labels come from
   data/ppc-tables.js, which reads them from the table's own <thead>.
   ========================================================================== */
@media (max-width: 860px) {
	.ppc-table-wide {
		/* A tile stack needs no horizontal scroll container. */
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		overflow-x: visible;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	table.ppc-cards,
	table.ppc-cards thead,
	table.ppc-cards tbody,
	table.ppc-cards tr,
	table.ppc-cards td {
		display: block;
		width: auto;
	}

	/* The header row is replaced by the per-cell labels. */
	table.ppc-cards thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	table.ppc-cards tr {
		margin-bottom: var(--space-4);
		padding: var(--space-2) var(--space-4);
		background: var(--surface-card);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
		overflow: hidden;
	}

	/* Row striping and hover make no sense once rows are cards. */
	table.ppc-cards tbody tr:nth-child(even),
	table.ppc-cards tbody tr:nth-of-type(odd),
	table.ppc-cards tbody tr:hover {
		background: var(--surface-card);
	}

	table.ppc-cards td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-4);
		padding: var(--space-3) 0;
		border: 0;
		border-bottom: 1px solid var(--border);
		text-align: right;
		font-size: var(--step-0);
	}

	table.ppc-cards tr td:last-child {
		border-bottom: 0;
	}

	/* Heading on the left, value on the right. */
	table.ppc-cards td::before {
		content: attr(data-label);
		flex: 0 0 42%;
		text-align: left;
		font-family: var(--font-body);
		font-size: var(--step--1);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--text-muted);
		/* The status colours are set on the td; keep labels neutral. */
		-webkit-text-fill-color: var(--text-muted);
	}

	/* Cells holding only an image: drop the label and let it centre. */
	table.ppc-cards td[data-media] {
		display: block;
		text-align: center;
		padding-top: var(--space-4);
	}

	table.ppc-cards td[data-media]::before {
		display: none;
	}

	.ppc-table-wide td img,
	table.ppc-cards td img {
		max-width: 260px;
		margin-inline: auto;
	}

	/* An empty cell would otherwise show a stray label. */
	table.ppc-cards td:empty {
		display: none;
	}
}

/* Very narrow screens: keep heading left / value right, just tighten it. */
@media (max-width: 460px) {
	table.ppc-cards td {
		gap: var(--space-3);
		padding: var(--space-2) 0;
		font-size: var(--step--1);
	}

	table.ppc-cards td::before {
		flex: 0 0 46%;
		letter-spacing: 0.02em;
	}
}

/* ==========================================================================
   Content protection (paired with data/ppc-protect.js)
   --------------------------------------------------------------------------
   A deterrent layer, not a security control — see the notes at the top of
   data/ppc-protect.js for what this can and cannot do.
   ========================================================================== */

/* Text is not selectable. Form fields stay usable so search still works. */
body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

input,
textarea,
select,
[contenteditable='true'] {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

/* Images are not draggable and get no long-press save sheet on mobile. */
img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	pointer-events: auto;
}

/* Screenshots are permitted, so the page no longer hides itself when the
   window loses focus, and printing is no longer blanked out. The watermark
   (in the foreground) is what carries attribution into any capture. */

/* Table thumbnails open in an on-page overlay, so show they are clickable. */
.ppc-table-wide td a,
.ppc-table-wide td img,
table.ppc-cards td img {
	cursor: zoom-in;
}


/* A missing image should not leave a tall gap of alt text in a tile. */
table.ppc-cards td[data-media] img,
.ppc-table-wide td img {
	min-height: 0;
	font-size: var(--step--1);
	color: var(--text-muted);
}

/* Legacy home-icon link on the blog index: give it a real button shape. */
.home-icon {
	position: absolute;
	top: calc(var(--header-height) + var(--space-3));
	left: clamp(var(--space-4), 4vw, var(--space-6));
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
		transform 0.16s var(--ease);
}

.home-icon:hover {
	background: var(--surface-sunken);
	border-color: var(--accent);
	transform: translateY(-1px);
}

.home-icon img {
	width: 20px;
	height: 20px;
	border: 0;
	box-shadow: none;
	background: none;
}

:root[data-theme='dark'] .home-icon img {
	filter: invert(1) brightness(1.6);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .home-icon img {
		filter: invert(1) brightness(1.6);
	}
}

/* Decorative separator rows (a single cell holding an <hr>) are used to divide
   states in the special-cancellation tables. As a card they would render as an
   empty tile with a stray heading, so hide them in card mode. */
@media (max-width: 860px) {
	table.ppc-cards tr.ppc-row-separator,
	table.ppc-cards tr.line-partition {
		display: none;
	}
}

/* ==========================================================================
   Image overlay (data/ppc-protect.js)
   --------------------------------------------------------------------------
   Table thumbnails used to link straight to the raw .jpg, which handed over the
   file with no watermark. They now open here instead, on top of the page, so
   the foreground watermark still covers the image.
   ========================================================================== */
.ppc-image-overlay {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(var(--space-4), 4vw, var(--space-7));
	background: rgba(6, 12, 21, 0.9);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s var(--ease), visibility 0.22s;
}

.ppc-image-overlay[data-open='true'] {
	opacity: 1;
	visibility: visible;
}

.ppc-image-overlay img {
	max-width: 100%;
	max-height: 84vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	background: #fff;
	cursor: zoom-out;
}

.ppc-image-overlay__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.16s var(--ease);
}

.ppc-image-overlay__close:hover {
	background: rgba(255, 255, 255, 0.26);
}

@media print {
	.ppc-image-overlay {
		display: none !important;
	}
}