/* ═══════════════════════════════════════════════════════════════
   StockFaves Dedicated Stock Page Styles
   Matching Home Page & PowerLink Theme (Fluid 1440px/1560px Layout)
   ═══════════════════════════════════════════════════════════════ */

.hidden {
	display: none !important;
}

.stock-page-body {
	background-color: var(--bg-body, #f8fafc);
	color: var(--text-navy, #0A1F44);
	font-family: var(--font-sans, 'Inter', sans-serif);
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

.stock-main-wrap {
	padding-top: 1.5rem;
	padding-bottom: 1.25rem;
}

.stock-loading-card, .stock-error-card {
	padding: 60px 20px;
	text-align: center;
	background: var(--bg-white, #ffffff);
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-lg, 16px);
	box-shadow: var(--shadow-sm);
	margin-top: 1.5rem;
}

.spinner-blue {
	display: inline-block;
	width: 36px;
	height: 36px;
	border: 3px solid rgba(0, 97, 255, 0.15);
	border-top-color: var(--energy-blue, #0061FF);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.stock-loading-text {
	margin-top: 1rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-muted, #64748b);
}

.stock-content-layout {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 0.5rem;
}

/* ── Hero Stock Card (Full Fluid Width) ──────────────────────── */
.stock-hero-card {
	background: var(--bg-white, #ffffff);
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-lg, 16px);
	padding: 1.75rem 2rem;
	box-shadow: var(--shadow-md, 0 4px 12px rgba(10, 31, 68, 0.06));
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.hero-stock-header-grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

@media (max-width: 960px) {
	.hero-stock-header-grid {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero-right-col {
		width: 100%;
		justify-content: space-between;
	}
	.hero-price-panel {
		align-items: flex-start !important;
	}
}

.hero-left-col {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1 auto;
	min-width: 0;
}

.hero-pill-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.stock-sym-badge {
	font-family: var(--font-mono, monospace);
	font-size: 0.85rem;
	font-weight: 800;
	background: var(--bg-gray-light, #f1f5f9);
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-sm, 6px);
	border: 1px solid var(--border-light, #e2e8f0);
	color: var(--text-navy, #0A1F44);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.stock-sector-badge {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-sm, 6px);
	background: rgba(0, 97, 255, 0.1);
	color: var(--energy-blue, #0061FF);
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stock-industry-badge, .stock-exchange-badge {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-sm, 6px);
	background: var(--bg-gray-light, #f1f5f9);
	color: var(--text-muted, #64748b);
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stock-company-name {
	margin: 0;
	font-size: 1.85rem;
	font-weight: 900;
	color: var(--text-navy, #0A1F44);
	line-height: 1.2;
}

.stock-location-line {
	font-size: 0.82rem;
	color: var(--text-muted, #64748b);
	font-weight: 500;
}

.hero-right-col {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-shrink: 0;
	justify-content: flex-end;
}

.hero-price-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.hero-current-price {
	font-family: var(--font-mono, monospace);
	font-size: 2rem;
	font-weight: 900;
	color: var(--text-navy, #0A1F44);
}

.hero-day-change {
	font-family: var(--font-mono, monospace);
	font-size: 0.95rem;
	font-weight: 700;
}

.hero-day-change.up { color: var(--green-power, #00C853); }
.hero-day-change.down { color: var(--rose, #EF4444); }
.hero-day-change.flat { color: var(--text-muted, #64748b); }

/* Not today's move — a change carried by a stored snapshot. It keeps its sign
   because it was real on the day it was recorded, but it does not get to wear
   the colour that means "up right now". */
.hero-day-change.stale { color: var(--text-muted, #64748b); }

/* The label beside the headline price. It no longer claims freshness — see
   stampPriceAge() — so only two variants survive: the MCX contract a
   commodity quote belongs to, and the date a fund's NAV was struck. */
.hero-price-age {
	margin-top: 4px;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: 999px;
	line-height: 1.6;
}

.hero-price-age.contract {
	color: #b45309;
	background: rgba(180, 83, 9, 0.12);
}

.hero-price-age.nav {
	color: #1d4ed8;
	background: rgba(29, 78, 216, 0.1);
	text-transform: none;
	letter-spacing: 0;
}

/* A tick landing on the headline price. Brief, and colour only — the number
   must not move, or it becomes unreadable during an active session. */
@keyframes hero-price-tick {
	0%   { background-color: rgba(0, 97, 255, 0.18); }
	100% { background-color: transparent; }
}

.hero-current-price.tick-flash {
	animation: hero-price-tick 0.6s ease-out;
	border-radius: 6px;
}

.hero-action-buttons {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.btn-outline-navy {
	background: transparent;
	border: 1.5px solid var(--border-light, #e2e8f0);
	color: var(--text-navy, #0A1F44);
	font-weight: 700;
	padding: 0.6rem 1.1rem;
	border-radius: var(--radius-md, 10px);
	cursor: pointer;
	transition: all 0.15s ease;
}

.btn-outline-navy:hover {
	background: var(--bg-gray-light, #f1f5f9);
	border-color: var(--border-light);
}

.btn-outline-navy.starred {
	background: #fef3c7;
	border-color: #f59e0b;
	color: #b45309;
}

/* `.btn-energy-blue` now lives in landing.css, which every page loads — it was defined only
   here, so the landing page (which does not load this file) rendered it unstyled. */

/* 52-Week Range Bar inside Hero */
.hero-range-box {
	background: var(--bg-gray-light, #f1f5f9);
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-md, 10px);
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.range-top-line {
	display: flex;
	justify-content: space-between;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-muted, #64748b);
}

.range-bar-track {
	position: relative;
	height: 8px;
	background: #e2e8f0;
	border-radius: 999px;
	margin: 0.25rem 0;
}

.range-bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(90deg, #ef4444, #f59e0b, #00C853);
	border-radius: 999px;
	width: 100%;
}

.range-marker {
	position: absolute;
	top: -4px;
	width: 16px;
	height: 16px;
	background: #ffffff;
	border: 3px solid var(--energy-blue, #0061FF);
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.range-ends-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.78rem;
	color: var(--text-muted, #64748b);
}

.range-ends-row strong {
	color: var(--text-navy, #0A1F44);
	font-family: var(--font-mono, monospace);
}

/* ── Universal Stock Card Block ──────────────────────────────── */
.stock-card-block {
	background: var(--bg-white, #ffffff);
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-lg, 16px);
	padding: 1.75rem 2rem;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	/* Colour only. Nothing here may lift, scale, shift or grow a shadow: a
	   grid of these is scanned by moving the cursor across it, and a card that
	   moves under the pointer takes the whole row with it. The border is
	   already 1px in the resting state, so re-colouring it costs no layout. */
	transition: border-color 0.12s ease, color 0.12s ease;
}

/* A card the pointer is over, and the one word that says which card it is.
   Every hub renders these — funds, ETFs, equities, bonds, commodities — so
   the treatment is defined once here rather than per page. */
.stock-card-block:hover {
	border-color: var(--energy-blue, #0061FF);
}

/* The title carried its colour inline, where no hover rule could reach it.
   It lives here now, on the class every hub card uses. */
.stock-card-title {
	color: var(--text-navy, #0A1F44);
	text-decoration: none;
}

.stock-card-block a,
.stock-card-title {
	transition: color 0.12s ease;
}

.stock-card-block:hover .stock-card-title,
.stock-card-block:hover h3 > a,
.stock-card-block h3 > a:hover,
.stock-card-block a.catalyst-title:hover {
	color: var(--energy-blue, #0061FF);
}

/* A pointer, so the card reads as the link it contains. */
.stock-card-block:hover h3 > a {
	cursor: pointer;
}

.block-header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.block-title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--text-navy, #0A1F44);
}

.block-subtitle {
	font-size: 0.8rem;
	color: var(--text-muted, #64748b);
}

.about-description-text {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--text-body, #475569);
	margin: 0;
}

.about-quick-facts-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-light, #e2e8f0);
}

.fact-card {
	background: var(--bg-gray-light, #f1f5f9);
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-md, 10px);
	padding: 0.85rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.fact-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.fact-value {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--text-navy, #0A1F44);
}

.fact-value a {
	color: var(--energy-blue, #0061FF);
	text-decoration: none;
}

.fact-value a:hover {
	text-decoration: underline;
}

.executives-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-navy, #0A1F44);
	margin: 0.5rem 0 0.75rem 0;
}

.executives-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.75rem;
}

.officer-row {
	background: var(--bg-gray-light, #f1f5f9);
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-sm, 6px);
	padding: 0.6rem 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.officer-name {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text-navy, #0A1F44);
}

.officer-title {
	font-size: 0.75rem;
	color: var(--text-muted, #64748b);
}

/* ── Quant Signals Quad Grid ─────────────────────────────────── */
.signals-quad-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.signal-box {
	background: var(--bg-gray-light, #f1f5f9);
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-md, 10px);
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.signal-horizon-title {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.signal-verdict-pill {
	display: inline-block;
	width: fit-content;
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-sm, 6px);
	font-size: 0.78rem;
	font-weight: 800;
	font-family: var(--font-mono, monospace);
}

.signal-verdict-pill.buy { background: rgba(0, 200, 83, 0.15); color: #007a33; border: 1px solid rgba(0, 200, 83, 0.3); }
.signal-verdict-pill.sell { background: rgba(239, 68, 68, 0.15); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.3); }
.signal-verdict-pill.hold { background: rgba(255, 179, 0, 0.15); color: #996c00; border: 1px solid rgba(255, 179, 0, 0.3); }
.signal-verdict-pill.neutral { background: #ffffff; color: var(--text-muted); border: 1px solid var(--border-light); }

.signal-details-line {
	font-size: 0.78rem;
	color: var(--text-body, #475569);
	font-weight: 600;
}

/* ── Two Column Financial Grid ───────────────────────────────── */
.stock-two-column-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

@media (max-width: 1024px) {
	.stock-two-column-grid {
		grid-template-columns: 1fr;
	}
}

.stock-grid-col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.metrics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.75rem;
}

.ratio-cell {
	background: var(--bg-gray-light, #f1f5f9);
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-sm, 6px);
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ratio-label {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--text-muted, #64748b);
}

.ratio-value {
	font-family: var(--font-mono, monospace);
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--text-navy, #0A1F44);
}

/* ── Quarterly results table ─────────────────────────────────
   The markup shipped with no styles at all, which nobody caught because the
   body was never filled: the page held its "Loading…" row forever. */
.results-table-container {
	overflow-x: auto;
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-sm, 6px);
}

.financial-results-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.84rem;
}

.financial-results-table th {
	text-align: left;
	padding: 10px 14px;
	background: var(--bg-gray-light, #f1f5f9);
	color: var(--text-muted, #64748b);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.financial-results-table td {
	padding: 10px 14px;
	color: var(--text-navy, #0A1F44);
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.financial-results-table tbody tr:last-child td {
	border-bottom: none;
}

.financial-results-table tbody tr:hover td {
	background: var(--bg-gray-light, #f1f5f9);
}

.financial-results-table td.positive { color: #047857; }
.financial-results-table td.negative { color: #b91c1c; }

/* The filings sit under the table inside the same block, so they need the
   separation the card border used to give them. */
.catalysts-list-feed:not([hidden]) {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-light, #e2e8f0);
}

.catalysts-list-feed {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.catalyst-card {
	padding: 0.75rem 1rem;
	border-radius: var(--radius-sm, 6px);
	background: var(--bg-gray-light, #f1f5f9);
	border: 1px solid var(--border-light, #e2e8f0);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.catalyst-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-navy, #0A1F44);
	text-decoration: none;
}

.catalyst-title:hover {
	color: var(--energy-blue, #0061FF);
}

.catalyst-date {
	font-size: 0.72rem;
	color: var(--text-muted, #64748b);
}

/* ── Modals & Dialogs ────────────────────────────────────────── */
.chart-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 31, 68, 0.6);
	backdrop-filter: blur(4px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.chart-modal-dialog {
	background: #ffffff;
	border-radius: var(--radius-lg, 16px);
	width: 100%;
	max-width: 1500px;
	overflow: hidden;
	box-shadow: var(--shadow-xl);
}

.chart-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.chart-modal-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--text-navy, #0A1F44);
}

.chart-modal-close {
	background: none;
	border: none;
	font-size: 1.25rem;
	cursor: pointer;
	color: var(--text-muted, #64748b);
}

.chart-modal-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.75rem 1.5rem;
	border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.chart-modal-toolbar .range-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.chart-modal-toolbar .range-btn {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted, #64748b);
	cursor: pointer;
}

.chart-modal-toolbar .range-btn:hover {
	border-color: var(--energy-blue, #0061FF);
	color: var(--energy-blue, #0061FF);
}

.chart-modal-toolbar .range-btn.active {
	background: var(--energy-blue, #0061FF);
	border-color: var(--energy-blue, #0061FF);
	color: #ffffff;
}

.chart-modal-toolbar .chart-legend-pills {
	display: flex;
	gap: 0.75rem;
	font-size: 0.7rem;
	font-weight: 700;
}

.chart-modal-toolbar .leg-price   { color: #0061FF; }
.chart-modal-toolbar .leg-dma50   { color: #fbbf24; }
.chart-modal-toolbar .leg-dma200  { color: #a855f7; }

.chart-modal-body {
	position: relative;
	/* Viewport less the head, toolbar and backdrop padding, so it never scrolls off. */
	height: clamp(400px, calc(100vh - 170px), 640px);
	width: 100%;
	padding: 1rem 1.25rem 1.25rem;
}

/* Pinned inside the padding: the chart library sizes itself to this box. */
.chart-modal-body .sfc-host {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	bottom: 1.25rem;
	left: 1.25rem;
}

.chart-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted, #64748b);
	background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
	.chart-modal-body { height: 380px; padding: 0.75rem; }
	.chart-modal-body .sfc-host { top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem; }
	.chart-modal-toolbar { padding: 0.6rem 0.9rem; }
	.chart-modal-toolbar .chart-legend-pills { display: none; }
}

.buy-modal-form {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.form-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-navy, #0A1F44);
}

.form-input, .form-select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-sm, 6px);
	background: var(--bg-gray-light, #f1f5f9);
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: var(--text-navy);
	outline: none;
}

.form-input:focus, .form-select:focus {
	border-color: var(--energy-blue);
	background: #ffffff;
}

.btn-block {
	width: 100%;
	padding: 0.75rem;
	font-size: 0.95rem;
}

/* ── Multi-Asset Filter Tabs & Badges ───────────────────────── */
.hub-search-input {
	width: 100%;
	padding: 9px 14px;
	border: 1.5px solid #94a3b8 !important;
	border-radius: 8px;
	font-size: 0.88rem;
	font-family: var(--font-sans, 'Inter', sans-serif);
	outline: none;
	background: #ffffff !important;
	color: #0A1F44 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
}

.hub-search-input:focus {
	border-color: #0061FF !important;
	box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.15) !important;
}

.hub-search-input::placeholder {
	color: #64748b;
	opacity: 1;
}

.hub-filter-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 2px 12px 2px;
	margin-bottom: 1.5rem;
	scrollbar-width: thin;
}

.hub-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 30px;
	color: #475569;
	font-family: var(--font-sans, 'Inter', sans-serif);
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.18s ease;
	user-select: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.hub-tab-btn:hover {
	background: #f8fafc;
	color: #0f172a;
	border-color: #cbd5e1;
	transform: translateY(-1px);
}

.hub-tab-btn.active {
	background: #0A1F44;
	color: #ffffff;
	border-color: #0A1F44;
	box-shadow: 0 4px 12px rgba(10, 31, 68, 0.15);
}

.hub-count-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: #f1f5f9;
	color: #64748b;
	border-radius: 12px;
	font-family: var(--font-mono, monospace);
	font-size: 0.74rem;
	font-weight: 700;
	transition: background 0.18s, color 0.18s;
}

.hub-tab-btn:hover .hub-count-pill {
	background: #e2e8f0;
	color: #334155;
}

.hub-tab-btn.active .hub-count-pill {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

/* ── Mobile Compactness & High-Density UI ─────────────────────── */
@media (max-width: 768px) {
	.stock-main-wrap {
		padding: 0.75rem 0.6rem 0.5rem 0.6rem !important;
	}

	.footer {
		margin-top: 1rem !important;
		padding: 30px 0 20px !important;
	}

	.stock-hero-card {
		padding: 1.15rem 1rem !important;
		border-radius: 12px !important;
		margin-bottom: 0.75rem !important;
	}

	.stock-hero-card h1 {
		font-size: 1.45rem !important;
		margin: 4px 0 !important;
		line-height: 1.25 !important;
	}

	.stock-hero-card p {
		font-size: 0.80rem !important;
		line-height: 1.35 !important;
		margin: 0 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.stock-hero-card .btn {
		padding: 7px 10px !important;
		font-size: 0.78rem !important;
		text-align: center;
		justify-content: center;
	}

	.hero-btn-actions {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		width: 100% !important;
	}

	.hero-btn-actions .btn {
		width: 100% !important;
		text-align: center !important;
		justify-content: center !important;
		padding: 7px 8px !important;
		font-size: 0.78rem !important;
		white-space: nowrap !important;
	}

@media (max-width: 440px) {
	.hero-btn-actions {
		grid-template-columns: 1fr !important;
	}
}

	.hub-filter-tabs {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		gap: 6px !important;
		padding: 2px 2px 8px 2px !important;
		margin-bottom: 0.75rem !important;
		scrollbar-width: none !important;
	}

	.hub-filter-tabs::-webkit-scrollbar {
		display: none !important;
	}

	.hub-tab-btn {
		padding: 5px 10px !important;
		font-size: 0.76rem !important;
		border-radius: 20px !important;
		flex-shrink: 0 !important;
	}

	.hub-count-pill {
		min-width: 18px !important;
		height: 18px !important;
		font-size: 0.68rem !important;
		padding: 0 4px !important;
	}

	.stock-card-block {
		padding: 11px 12px !important;
		border-radius: 8px !important;
		gap: 0.65rem !important;
	}

	.block-title {
		font-size: 1.08rem !important;
	}

	.block-subtitle {
		font-size: 0.72rem !important;
	}

	.stocks-cards-grid,
	.mf-cards-grid,
	.etf-cards-grid,
	.commodity-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 0.75rem !important;
	}

	.hero-stock-header-grid {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.75rem !important;
	}

	.hero-left-col,
	.hero-right-col {
		width: 100% !important;
	}

	.hero-right-col {
		display: flex !important;
		justify-content: space-between !important;
		align-items: flex-end !important;
		border-top: 1px solid rgba(226, 232, 240, 0.6);
		padding-top: 0.65rem !important;
	}

	.hero-current-price {
		font-size: 1.55rem !important;
	}

	.hero-stock-name {
		font-size: 1.3rem !important;
	}

	.metrics-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.5rem !important;
	}

	.ratio-cell {
		padding: 6px 8px !important;
		gap: 0.15rem !important;
	}

	.ratio-label {
		font-size: 0.65rem !important;
	}

	.ratio-value {
		font-size: 0.84rem !important;
	}

	.signals-quad-grid {
		grid-template-columns: 1fr !important;
		gap: 0.6rem !important;
	}

	.signal-box {
		padding: 0.75rem !important;
		gap: 0.4rem !important;
	}

	.stock-two-column-grid {
		gap: 0.75rem !important;
	}
}

/* ── Close buttons: one treatment, everywhere ─────────────────
   The same circular hover the app uses — a fill under the pointer, nothing
   that moves. See the matching block in style.css. */
.chart-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	line-height: 1;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.chart-modal-close:hover {
	background: var(--bg-gray-light, #f1f5f9);
	color: var(--text-navy, #0A1F44);
}

.chart-modal-close:focus-visible {
	outline: 2px solid var(--energy-blue, #0061FF);
	outline-offset: 2px;
}

/* ── Mobile: the phone layout, against the classes the markup actually uses ──
   The block above styles `.hero-btn-actions` and `.hero-stock-name`. Neither
   exists: stock.html has `.hero-action-buttons` and `.stock-company-name`, so
   every one of those rules was dead and the hero kept its desktop layout on a
   380px screen — three full-width buttons in a row that ran off the edge and
   took the page's horizontal scroll with them. These target the real names.

   Everything here is layout and type size. Nothing animates, nothing moves on
   touch: a phone has no hover state to reward. */
@media (max-width: 768px) {
	/* A flex row that cannot shrink is what pushes a page sideways. */
	.hero-stock-header-grid,
	.hero-left-col,
	.hero-right-col,
	.hero-price-panel {
		min-width: 0;
		max-width: 100%;
	}

	.hero-right-col {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	/* Price first, then the actions across the full width beneath it. Side by
	   side there is room for neither. */
	.hero-price-panel {
		flex: 1 1 100%;
		align-items: flex-start;
	}

	.hero-action-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
	}

	.hero-action-buttons .btn {
		width: 100%;
		justify-content: center;
		text-align: center;
		padding: 9px 8px;
		font-size: 0.78rem;
		white-space: nowrap;
	}

	/* The watchlist button carries the longest label, so it takes the full row
	   and the two short ones share the one below. */
	.hero-action-buttons .watch-btn {
		grid-column: 1 / -1;
	}

	.stock-company-name {
		font-size: 1.35rem;
		line-height: 1.25;
	}

	.stock-sector-badge,
	.stock-industry-badge {
		max-width: 46vw;
	}

	/* The 52-week box: three labels and three figures do not fit on one line
	   at 380px, and squeezing them wrapped every value mid-number. */
	.range-top-line,
	.range-ends-row {
		flex-wrap: wrap;
		gap: 0.35rem 0.75rem;
	}

	.range-top-line span,
	.range-ends-row > * {
		flex: 1 1 auto;
		min-width: 0;
	}

	.hero-range-box {
		padding: 0.75rem 0.85rem;
	}

	/* Card grids: the inline style on each hub asks for a 320px minimum, which
	   is wider than the content box of a 360px phone. One column, and the
	   inline rule has to be beaten. */
	.stocks-cards-grid,
	.mf-cards-grid,
	.etf-cards-grid,
	.bond-cards-grid,
	.commodity-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 0.75rem !important;
	}

	/* The fund-house and plan selects sit in a row built for a desktop. */
	.hub-filter-row label,
	.hub-filter-row select {
		width: 100%;
	}

	/* A wide table scrolls inside its own box rather than widening the page. */
	.results-table-container {
		-webkit-overflow-scrolling: touch;
	}

	.financial-results-table th,
	.financial-results-table td {
		padding: 8px 10px;
		font-size: 0.78rem;
	}
}

@media (max-width: 440px) {
	/* Below this the two short buttons stop fitting side by side either. */
	.hero-action-buttons {
		grid-template-columns: 1fr;
	}

	.hero-current-price {
		font-size: 1.45rem;
	}

	.stock-company-name {
		font-size: 1.2rem;
	}
}

/* ── The business summary, folded ────────────────────────────
   Yahoo's descriptions run to a full page — HDFC Bank's is 2,000 characters
   of semicolons — and on a phone that is fifteen screens of prose between the
   price and the numbers a reader came for. It is clamped to a few lines with
   the rest one tap away.

   Clamped, not truncated: the whole text stays in the DOM, so a crawler and a
   reader who taps get the same words. */
.about-description-text.clamped {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.about-summary-wrap {
	position: relative;
}

/* The link sits at the end of the last visible line, not on a line of its
   own: "…Retail Banking, Wholesale  view more…". While the text is clamped it
   is lifted out of the flow into the bottom-right corner, with a short fade
   under it so it never lands on top of a word. Expanded, it drops back into
   normal flow and reads as an ordinary link. */
.about-toggle {
	padding: 0 0 0 2.75rem;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--energy-blue, #0061FF);
	cursor: pointer;
	transition: color 0.12s ease;
}

.about-summary-wrap:has(.clamped) .about-toggle {
	position: absolute;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--bg-white, #ffffff) 45%);
}

/* Expanded, the clamp is gone and so is the absolute positioning above — the
   button then fell into normal flow BELOW a block-level <p>, landing on a line
   of its own under a 2.75rem indent. "View less" belongs at the end of the
   sentence it closes, the same place "View more" sat. Making the paragraph
   inline for that state lets the button follow the last word instead of the
   last line. */
.about-summary-wrap:not(:has(.clamped)) .about-description-text {
	display: inline;
}

.about-summary-wrap:not(:has(.clamped)) .about-toggle {
	padding: 0 0 0 0.4rem;
}

/* :has() is recent enough that a browser without it must still get a usable
   control — there it simply follows the paragraph, which is where it sat
   before. Nothing is hidden or unreachable either way. */
.about-toggle:hover {
	color: var(--energy-blue-hover, #0052d6);
}

.about-toggle:focus-visible {
	outline: 2px solid var(--energy-blue, #0061FF);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (max-width: 768px) {
	/* Less of it on a narrow screen, where each line holds a third as much. */
	.about-description-text.clamped {
		-webkit-line-clamp: 5;
		line-clamp: 5;
	}

	.about-description-text {
		font-size: 0.88rem;
		line-height: 1.6;
	}
}

.chart-status-link {
	display: inline-block;
	margin-top: 0.6rem;
	font-weight: 800;
	color: var(--energy-blue, #0061FF);
	text-decoration: none;
}

.chart-status-link:hover {
	text-decoration: underline;
}

/* ── Inline price chart (profile page) ───────────────────────── */
.chart-inline-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.25rem 0 1rem;
}

.chart-inline-toolbar .range-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.chart-inline-toolbar .range-btn {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted, #64748b);
	cursor: pointer;
}

.chart-inline-toolbar .range-btn:hover {
	border-color: var(--energy-blue, #0061FF);
	color: var(--energy-blue, #0061FF);
}

.chart-inline-toolbar .range-btn.active {
	background: var(--energy-blue, #0061FF);
	border-color: var(--energy-blue, #0061FF);
	color: #ffffff;
}

.chart-inline-toolbar .chart-legend-pills {
	display: flex;
	gap: 0.75rem;
	font-size: 0.7rem;
	font-weight: 700;
}

.chart-inline-toolbar .leg-price  { color: #0061FF; }
.chart-inline-toolbar .leg-dma50  { color: #fbbf24; }
.chart-inline-toolbar .leg-dma200 { color: #a855f7; }
.chart-inline-toolbar .leg-buy    { color: #16a34a; }
.chart-inline-toolbar .leg-div    { color: #2563eb; }

.chart-inline-body {
	position: relative;
	height: 420px;
	width: 100%;
}

.chart-inline-body .sfc-host {
	position: absolute;
	inset: 0;
}

@media (max-width: 768px) {
	.chart-inline-body { height: 300px; }
	.chart-inline-toolbar .chart-legend-pills { display: none; }
}

/* ── Analyst consensus target, beside the 52-week range ─────── */
.hero-range-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
}

.hero-range-row .hero-range-box { flex: 1 1 420px; }

.hero-target-box {
	flex: 0 0 auto;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: var(--radius-md, 12px);
	background: #f8fafc;
}

.hero-target-box .target-label {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted, #64748b);
}

.hero-target-box .target-value {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--text-navy, #0A1F44);
	font-family: var(--font-mono, monospace);
}

.hero-target-box .target-upside {
	font-size: 0.85rem;
	font-weight: 800;
	color: #059669;
}

.hero-target-box .target-upside.is-down { color: #dc2626; }

.hero-target-box .target-meta {
	font-size: 0.68rem;
	color: var(--text-muted, #64748b);
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.stock-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.2rem;
	margin: -0.55rem 0 -0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
}

.stock-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--energy-blue, #0061FF);
	text-decoration: none;
	padding: 1px 5px;
	border-radius: 5px;
}

.stock-breadcrumb a:hover {
	background: rgba(0, 97, 255, 0.08);
	text-decoration: underline;
}

.stock-breadcrumb .crumb-icon { font-size: 0.8rem; line-height: 1; }

.stock-breadcrumb .crumb-sep {
	color: var(--text-muted, #64748b);
	opacity: 0.7;
}

.stock-breadcrumb .crumb-current {
	color: var(--text-navy, #0A1F44);
	font-weight: 800;
	padding: 1px 2px;
}

@media (max-width: 600px) {
	.stock-breadcrumb { font-size: 0.75rem; margin: -0.2rem 0 -0.8rem; }
}

/* ── Mobile: the profile hero ────────────────────────────────
   The target card is sized to sit BESIDE the 52-week range on a desktop
   row. Once that row wraps on a phone it kept its content width and left
   a column of dead space down the right of the card, so it takes the full
   width and lays its figures out along a line instead of down one. */
@media (max-width: 700px) {
	.hero-range-row { gap: 0.75rem; }

	.hero-target-box {
		flex: 1 1 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.5rem;
		padding: 0.7rem 0.9rem;
	}

	.hero-target-box .target-label { width: 100%; }
	.hero-target-box .target-meta { margin-left: auto; }
}

/* 0.7rem is 11.2px, under the 11.5px floor the rest of this sheet holds to
   for anything a reader has to actually read on a phone. */
@media (max-width: 600px) {
	.hero-target-box .target-label,
	.hero-target-box .target-meta { font-size: 0.72rem; }
}

/* ── Minimum readable label size on a phone (hubs and profiles) ──
   A sweep at 390px across all 25 internal pages found ~1,380 text nodes
   under 11.5px: card metadata spans at 10.4px, index-count pills at 10.9px,
   ratio labels at 10.4px, chart legend items at 11.2px.

   None is body copy — they are the labels that name the number beside them,
   which is exactly the text a reader cannot afford to squint at. A floor,
   not a redesign: the desktop sizes are untouched, and anything already
   above the line stays where it is. */
@media (max-width: 600px) {
	.hub-count-pill,
	.hub-tab-btn span,
	.stock-sym-badge,
	.stock-sector-badge,
	.stock-industry-badge,
	.stock-exchange-badge,
	.ratio-label,
	.fact-label,
	.leg-item,
	.crumb-sep,
	.stock-card-block span,
	.mf-card-block span,
	.rb-pill,
	.rb-corner {
		font-size: 11.5px !important;
	}
}

/* The bond page's highlight list and the rulebook's pills — the last labels
   under the floor. */
@media (max-width: 600px) {
	.security-highlights li,
	.bond-highlight,
	.rb-pill,
	.rb-corner,
	.stat-pill,
	.stat-label {
		font-size: 11.5px !important;
	}
}

/* The bond cards set their type with inline styles in a template literal, and
   the smallest of those resolve to about 11.2px once the root shrinks on a
   phone. Scoped to the grid so only those cards are lifted. */
@media (max-width: 600px) {
	.bond-cards-grid li,
	.bond-cards-grid div,
	.bond-cards-grid span,
	.bond-cards-grid strong {
		font-size: 11.5px !important;
	}
}