/*
 * Bengal Property Index — Tools (standalone PHP site at /tools/).
 * Same design system as the main site (mrittika v2): warm neutrals, indigo
 * accent, Inter + Poppins self-hosted, light and dark by device setting.
 */

/* ── Fonts ── */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2212, U+FEFF; }
@font-face { font-family: "Inter"; src: url("fonts/inter-rupee.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+20B9; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }

/* ── Tokens ── */
.bpi-standalone {
	--color-surface: #FAF8F5;
	--color-surface-raised: #FFFFFF;
	--color-surface-container: #F1ECE4;
	--color-surface-container-high: #E7E1D8;
	--color-on-surface: #191714;
	--color-on-surface-variant: #57514A;
	--color-on-surface-faint: #6B655C;
	--color-outline: #DDD6CB;
	--color-outline-strong: #A79F93;
	--color-accent: #3B4C9B;
	--color-on-accent: #FFFFFF;
	--color-accent-soft: rgba(59, 76, 155, 0.12);
	--color-accent-hover: #32418A;
	--color-primary: var(--color-accent);
	--color-on-primary: var(--color-on-accent);
	--font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem;
	--text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	--text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem;
	--shape-xs: 4px; --shape-sm: 6px; --shape-md: 8px; --shape-lg: 10px; --shape-pill: 999px;
	--wide-width: 1140px; --content-width: 720px;
	--border-hair: 1px solid var(--color-outline);
	color-scheme: light;
	margin: 0;
	background: var(--color-surface);
	color: var(--color-on-surface);
	font: var(--text-base)/1.7 var(--font-body);
	-webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) {
	.bpi-standalone {
		--color-surface: #191714;
		--color-surface-raised: #221F1B;
		--color-surface-container: #221F1B;
		--color-surface-container-high: #2C2823;
		--color-on-surface: #F1ECE4;
		--color-on-surface-variant: #A79F93;
		--color-on-surface-faint: #A79F93;
		--color-outline: #3A352E;
		--color-outline-strong: #6B655C;
		--color-accent: #99A6EE;
		--color-on-accent: #191714;
		--color-accent-soft: rgba(153, 166, 238, 0.14);
		--color-accent-hover: #AEB8F1;
		color-scheme: dark;
	}
}
.bpi-standalone *, .bpi-standalone *::before, .bpi-standalone *::after { box-sizing: border-box; }
.bpi-standalone .wrap { max-width: var(--wide-width); margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.bpi-standalone a { color: inherit; }
.bpi-standalone :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-accent); color: var(--color-on-accent); padding: .6rem 1rem; }
.skip-link:focus { left: 0; }

/* ── Header (mirrors the main site) ── */
.bpi-sa-header { position: sticky; top: 0; z-index: 100; background: var(--color-surface); border-bottom: var(--border-hair); }
.bpi-sa-bar { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; }
.bpi-sa-brand { font: 700 var(--text-lg)/1.15 var(--font-display); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; color: var(--color-on-surface) !important; }
.bpi-sa-nav { display: flex; gap: 2px; margin-left: var(--space-4); margin-right: auto; }
.bpi-sa-nav a { padding: .45em .8em; border-radius: var(--shape-sm); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.bpi-sa-nav a:hover { background: var(--color-surface-container); }
.bpi-sa-nav a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent); }
.bpi-sa-place { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: 0 .85em; border: var(--border-hair); border-radius: var(--shape-sm); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bpi-sa-place:hover { border-color: var(--color-accent); color: var(--color-accent); }
.bpi-sa-menu { display: none; position: relative; }
.bpi-sa-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 4px; border-radius: var(--shape-sm); }
.bpi-sa-menu summary::-webkit-details-marker { display: none; }
.bpi-sa-menu summary span { display: block; width: 20px; height: 2px; background: currentColor; }
.bpi-sa-menu[open] summary { background: var(--color-surface-container); }
.bpi-sa-menu nav { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; display: grid; padding: var(--space-1); background: var(--color-surface-raised); border: var(--border-hair); border-radius: var(--shape-md); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.bpi-sa-menu nav a { padding: .75em 1em; border-radius: var(--shape-sm); text-decoration: none; font-weight: 500; }
.bpi-sa-menu nav a:hover { background: var(--color-surface-container); }
@media (max-width: 900px) {
	.bpi-sa-nav { display: none; }
	.bpi-sa-menu { display: block; }
	.bpi-sa-place { margin-left: auto; }
}
@media (max-width: 480px) {
	.bpi-sa-bar { gap: var(--space-2); min-height: 56px; }
	.bpi-sa-brand { font-size: .85rem; }
	.bpi-sa-place { min-height: 36px; padding: 0 .5em; font-size: var(--text-xs); }
}

/* ── Footer (mirrors the main site) ── */
.bpi-sa-footer { margin-top: var(--space-6); border-top: var(--border-hair); background: var(--color-surface-container); font-size: var(--text-sm); }
.bpi-sa-footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-4) var(--space-5); padding-block: var(--space-5); }
.bpi-sa-footer-brand { display: grid; gap: var(--space-2); align-content: start; }
.bpi-sa-footer-name { font: 700 var(--text-lg) var(--font-display); }
.bpi-sa-footer-tagline { color: var(--color-on-surface-variant); max-width: 36ch; }
.bpi-sa-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: var(--border-hair); border-radius: var(--shape-sm); color: var(--color-on-surface-variant); }
.bpi-sa-social:hover { color: var(--color-accent); border-color: var(--color-accent); }
.bpi-sa-footer-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .5em var(--space-4); align-content: start; }
.bpi-sa-footer-nav a { color: var(--color-on-surface-variant); text-decoration: none; }
.bpi-sa-footer-nav a:hover { color: var(--color-accent); text-decoration: underline; }
.bpi-sa-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); border-top: var(--border-hair); font-size: var(--text-xs); color: var(--color-on-surface-variant); }
.bpi-sa-footer-bottom a { color: var(--color-on-surface); font-weight: 600; }
@media (max-width: 700px) { .bpi-sa-footer-main { grid-template-columns: 1fr; } .bpi-sa-footer-bottom { flex-direction: column; } }

/* ── Page structure ── */
.bpi-tools { padding-block: var(--space-4) var(--space-6); }
.bpi-tools > .wrap > * { max-width: 860px; margin-inline: auto; }
.bpi-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-on-surface-variant); margin-bottom: var(--space-4); }
.bpi-crumbs a { color: inherit; text-decoration: none; }
.bpi-crumbs a:hover { text-decoration: underline; }
.bpi-tool-head .entry-title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; margin: 0 0 var(--space-3); }
.bpi-lede { font-size: var(--text-lg); color: var(--color-on-surface-variant); margin: 0 0 var(--space-5); line-height: 1.5; }
.bpi-tools h2 { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; margin: var(--space-5) auto var(--space-3); }
.bpi-tools p, .bpi-tools li { line-height: 1.7; }
.bpi-tools a { text-underline-offset: 3px; }

/* ── Calculator card ── */
.bpi-card {
	background: var(--color-surface-raised, var(--color-surface));
	border: var(--border-hair);
	border-radius: var(--shape-md);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
}
.bpi-form { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.bpi-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bpi-field label, .bpi-field legend { font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; color: var(--color-on-surface-variant); }
.bpi-field small { font-size: var(--text-xs); color: var(--color-on-surface-faint); }
.bpi-field input:not([type=radio]):not([type=checkbox]),
.bpi-field select {
	font: inherit;
	font-size: var(--text-base);
	color: var(--color-on-surface);
	background: var(--color-surface-raised, var(--color-surface));
	border: var(--border-hair);
	border-radius: var(--shape-sm);
	padding: .7rem .9rem;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
}
.bpi-field input:focus-visible,
.bpi-field select:focus-visible,
.bpi-btn:focus-visible,
.bpi-seg label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bpi-inline { display: flex; gap: var(--space-2); }
.bpi-inline > input { flex: 1 1 8rem; min-width: 0; }
.bpi-field .bpi-inline > select { flex: 0 0 auto; width: auto; min-width: 8.5rem; }
.bpi-form--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bpi-seg { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.bpi-seg label {
	display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
	border: var(--border-hair); border-radius: var(--shape-sm); padding: .55rem 1rem; min-height: 44px;
	background: var(--color-surface-raised, var(--color-surface)); font-size: var(--text-sm); color: var(--color-on-surface); font-weight: 500; letter-spacing: 0;
}
.bpi-seg label:has(input:checked) { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent); font-weight: 600; }
.bpi-seg input { accent-color: currentColor; margin: 0; width: 1rem; height: 1rem; }
.bpi-seg-wrap { grid-column: 1 / -1; }
.bpi-actions { grid-column: 1 / -1; display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.bpi-btn {
	font: 600 var(--text-sm) var(--font-body);
	background: var(--color-accent); color: var(--color-on-accent);
	border: 0; border-radius: var(--shape-sm); padding: .8rem 1.5rem; cursor: pointer; min-height: 48px;
}
.bpi-btn:hover { background: var(--color-accent-hover); }
.bpi-js .bpi-btn--calc { display: none; } /* Live results when JS runs; button kept for no-JS. */
.bpi-hint { font-size: var(--text-xs); color: var(--color-on-surface-faint); }

/* ── Results ── */
.bpi-result { margin-top: var(--space-4); border-top: var(--border-hair); padding-top: var(--space-4); }
.bpi-big { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--space-3); }
.bpi-stat { background: var(--color-surface-raised, var(--color-surface)); border: var(--border-hair); border-radius: var(--shape-md); padding: var(--space-3); }
.bpi-stat span { display: block; font-size: var(--text-xs); color: var(--color-on-surface-variant); }
.bpi-stat strong { display: block; font: 700 var(--text-xl)/1.2 var(--font-body); margin-top: var(--space-1); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bpi-stat em { display: block; font-style: normal; font-size: var(--text-xs); color: var(--color-on-surface-faint); margin-top: var(--space-1); }
.bpi-stat--primary { background: var(--color-accent-soft); border-color: var(--color-accent); }
.bpi-stat--primary strong { color: var(--color-accent); }

.bpi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bpi-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.bpi-table th, .bpi-table td { text-align: left; padding: .6rem .75rem; border-bottom: var(--border-hair); }
.bpi-table td.num, .bpi-table th.num { text-align: right; white-space: nowrap; }
.bpi-table thead th { font-size: var(--text-xs); color: var(--color-on-surface-variant); font-weight: 600; }
.bpi-table tr.is-from th, .bpi-table tr.is-from td { font-weight: 700; }

.bpi-note {
	font-size: var(--text-sm); color: var(--color-on-surface-variant);
	border: var(--border-hair); padding: var(--space-2) var(--space-3);
	background: var(--color-surface-container); border-radius: var(--shape-md);
}
.bpi-error { color: var(--color-on-surface); font-weight: 600; }

/* ── FAQ ── */
.bpi-faq-item { border-bottom: var(--border-hair); }
.bpi-faq-item summary { cursor: pointer; padding: var(--space-3) 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.bpi-faq-item summary::-webkit-details-marker { display: none; }
.bpi-faq-item summary::after { content: "+"; font-weight: 400; font-size: 1.25em; line-height: 1; }
.bpi-faq-item[open] summary::after { content: "−"; }
.bpi-faq-a { padding-bottom: var(--space-3); color: var(--color-on-surface-variant); }
.bpi-faq-a p { margin: 0; }

/* ── Tool cards ── */
.bpi-tool-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bpi-tool-card {
	display: flex; flex-direction: column; gap: var(--space-2);
	padding: var(--space-4); border-radius: var(--shape-md); border: var(--border-hair);
	background: var(--color-surface-raised, var(--color-surface)); color: inherit; text-decoration: none;
	transition: border-color .15s ease;
}
.bpi-tool-card:hover { border-color: var(--color-accent); }
.bpi-tool-card:hover strong { color: var(--color-accent); }
.bpi-tool-card strong { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); line-height: 1.3; }
.bpi-tool-card span { font-size: var(--text-sm); color: var(--color-on-surface-variant); }
.bpi-more { margin-top: var(--space-6); }
.bpi-updated { font-size: var(--text-xs); color: var(--color-on-surface-faint); margin-top: var(--space-5); }

@media (max-width: 520px) {
	.bpi-card { padding: var(--space-3); }
	.bpi-field .bpi-inline > select { min-width: 7.5rem; }
	.bpi-form--wide { grid-template-columns: 1fr; }
}
@media print {
	.bpi-more, .bpi-actions, .bpi-sa-header, .bpi-sa-footer { display: none !important; }
}

/* ── EMI schedule ── */
.bpi-schedule { margin-top: var(--space-3); }
.bpi-schedule summary { cursor: pointer; padding: var(--space-2) 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ── Quick answer (AEO) ── */
.bpi-answer {
	font-size: var(--text-lg); line-height: 1.5;
	background: var(--color-surface-container); border: var(--border-hair); border-radius: var(--shape-md);
	padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5);
}


/* ── Hero band (same as the main site) ── */
.bpi-standalone { overflow-x: clip; }
.bpi-hero { position: relative; isolation: isolate; display: grid; gap: var(--space-2); padding-block: var(--space-4) var(--space-4); margin-bottom: var(--space-4); }
.bpi-hero::before {
	content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
	background:
		radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-accent) 22%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
		linear-gradient(180deg, var(--color-surface-container) 0%, var(--color-surface) 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.bpi-hero > * { margin: 0 !important; }
.bpi-eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-on-surface-variant); }
.bpi-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2) !important; }
.bpi-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .85em; border: var(--border-hair); border-radius: var(--shape-pill); background: var(--color-surface-raised); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.bpi-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.bpi-chip[aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
@media (max-width: 560px) {
	.bpi-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px !important; padding-inline: 16px; }
	.bpi-chips::-webkit-scrollbar { display: none; }
	.bpi-tool-head .entry-title { font-size: 1.6rem; }
	.bpi-lede { font-size: var(--text-base); }
}