/* cost-index.css — IndiaRealTime Cost of Living & Breathing Index
   Page shell (header, footer, .wrap/.ir-wrap, .pghead, .ir-bc, fonts,
   colors) comes from the theme's own ir-tokens.css/ir-home-v2.css/ir-home.css,
   loaded before this file. Same shape as indiarealtime-fuel-prices' own
   assets/css/fuel-prices.css (irf-* prefix there, irci-* here), trimmed of
   the fuel-toggle/tank-calculator rules this page doesn't have. */

/* ── Freshness line ── */
.irci-fresh {
	display: block;
	font-size: 13px;
	color: var(--mt, #555555);
	margin: -6px 0 20px;
}
.irci-fresh strong { color: var(--tx, #000000); font-weight: 600; }

/* ── Summary cards ── */
.irci-summary-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 24px;
}
@media (min-width: 640px) {
	.irci-summary-grid { grid-template-columns: repeat(4, 1fr); }
}
.irci-summary-card {
	background: var(--wh, #fff);
	border: 1px solid var(--bd, #DDDDDD);
	border-radius: var(--r, 12px);
	padding: 14px 16px;
	min-height: 44px;
}
.irci-summary-lbl {
	font-size: 12px;
	font-weight: 600;
	color: var(--mt, #555555);
	display: block;
	margin-bottom: 6px;
}
.irci-summary-val {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 20px;
	font-weight: 700;
	color: var(--tx, #000000);
	display: block;
	line-height: 1.2;
}
.irci-summary-ctx {
	display: block;
	font-size: 12px;
	color: var(--mt, #555555);
	margin-top: 4px;
	line-height: 1.4;
}

/* ── Controls row: live filter only ── */
.irci-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.irci-filter-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 220px;
}
.irci-filter-row input[type="search"] {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bd, #DDDDDD);
	border-radius: var(--r, 12px);
	background: var(--wh, #fff);
	color: var(--tx, #000000);
	font-size: 14px;
}
.irci-filter-count {
	font-size: 12.5px;
	color: var(--mt, #555555);
	white-space: nowrap;
}

/* ── Table ── */
.irci-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--bd, #DDDDDD);
	border-radius: var(--r, 12px);
	margin-bottom: 28px;
}
.irci-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
.irci-table th {
	text-align: left;
	padding: 0;
	background: var(--bg, #FFFFFF);
	color: var(--mt, #555555);
	font-weight: 600;
	font-size: 12px;
	border-bottom: 1px solid var(--bd, #DDDDDD);
	white-space: nowrap;
}
.irci-th-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-weight: inherit;
	text-align: left;
	cursor: pointer;
}
.irci-th-btn:hover { color: var(--tx, #000000); }
.irci-th-btn .arrow { font-size: 10px; opacity: .35; flex-shrink: 0; }
th[aria-sort]:not([aria-sort="none"]) .irci-th-btn .arrow { opacity: 1; color: var(--brand-text, #B84400); }
.irci-table th[aria-sort]:not([aria-sort="none"]) { background: var(--brand-tint-50, #FFF3EA); }

.irci-table td {
	padding: 12px 14px;
	color: var(--tx, #000000);
	vertical-align: top;
}
.irci-table tbody tr:nth-child(even) { background: var(--bg, #FFFFFF); }
.irci-table tbody tr:hover { background: var(--brand-tint-50, #FFF3EA); }

.irci-cell-num {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.irci-dash { color: var(--mt, #555555); }

.irci-city-cell { min-width: 150px; }
.irci-city-name { display: block; font-weight: 700; color: var(--tx, #000000); text-decoration: none; font-size: 14px; }
.irci-city-name:hover { text-decoration: underline; }
.irci-state-sub { display: block; font-size: 11.5px; color: var(--mt, #555555); margin-top: 2px; }

/* Score chip - same three-tier tokens as the per-city page block
   (--success/--warning/--danger), not the AQI-specific 6-tier palette. */
.irci-score-chip {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 50px;
	color: #fff;
}

@media (max-width: 699px) {
	.irci-table .irci-mobile-hide { display: none; }
	.irci-table td, .irci-table th { padding: 10px 10px; }
}