/* ============================================================
   DASH YIELD - REDESIGN
   ============================================================ */

@font-face {
	font-family: 'MontserratSemiBold';
	src:
		url('fonts/Montserrat/static/Montserrat-SemiBold.woff2') format('woff2'),
		url('fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'MontserratSemiBoldItalic';
	src:
		url('fonts/Montserrat/static/Montserrat-SemiBoldItalic.woff2') format('woff2'),
		url('fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'RobotoCondensedRegular';
	src:
		url('fonts/Roboto_Condensed/static/RobotoCondensed-Regular.woff2') format('woff2'),
		url('fonts/Roboto_Condensed/static/RobotoCondensed-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'RobotoCondensedBold';
	src:
		url('fonts/Roboto_Condensed/static/RobotoCondensed-Bold.woff2') format('woff2'),
		url('fonts/Roboto_Condensed/static/RobotoCondensed-Bold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}


/* ---------- design tokens ---------- */

:root {
	--dash-blue: #008de4;
	--dash-dark: #012060;
	--dash-green: #4b7;

	--page-bg: #f1f4f6;
	--card: rgba(255, 255, 255, .93);
	--card-soft: rgba(255, 255, 255, .78);
	--border: #dce4e8;

	--text: #30383d;
	--muted: #7a8287;

	--radius: 14px;
	--shadow: 0 4px 18px rgba(28, 48, 58, .08);

	--page-width: 1380px;
	--gutter: clamp(18px, 3vw, 44px);
	--gap: clamp(14px, 1.5vw, 24px);

	--corner-width: clamp(280px, 28vw, 390px);
	/* Exact height occupied by the 607 × 617 illustration. */
	--corner-height: calc(var(--corner-width) * 617 / 607);
	--corner-reserve: calc(var(--corner-height) + 24px);
}


/* ---------- base ---------- */

html {
	box-sizing: border-box;
	font-size: 16px;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;

	color: var(--text);
	background:
		linear-gradient(135deg, #f7f9fa 0%, var(--page-bg) 100%);

	font-family: 'RobotoCondensedRegular', Arial, sans-serif;
	font-size: clamp(15px, .22vw + 14px, 17px);
	line-height: 1.45;
}


/* ---------- page frame ---------- */

.page-shell {
	position: relative;
	z-index: 1;
	width: min(var(--page-width), calc(100% - 2 * var(--gutter)));
	min-height: 100vh;
	margin: 0 auto;
	/* Reserve the complete fixed illustration footprint so that the
	   final cards can always be read when the page is scrolled to the bottom. */
	padding: var(--gutter) 0 var(--corner-reserve);
}



/* ---------- header ---------- */

.page-header {
	display: grid;
	grid-template-columns: minmax(270px, .85fr) minmax(300px, 1.25fr) minmax(220px, .75fr);
	gap: var(--gap);
	align-items: center;

	margin-bottom: var(--gap);
}

.brand-panel,
.intro-panel,
.meta-panel {
	min-width: 0;
}

.brand-panel {
	position: relative;
	padding: 8px 4px;
}

.brand-link {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
	text-decoration: none;
}

img.logo {
	display: block;
	width: clamp(165px, 16vw, 230px);
	height: auto;
}

span.subbrand {
	margin-left: 6px;
	margin-bottom: 10px;

	color: var(--dash-blue);
	font-family: 'MontserratSemiBoldItalic', Arial, sans-serif;
	font-size: clamp(27px, 3vw, 40px);
	font-style: italic;
	font-weight: 600;
	line-height: .8;
}

.brand-tagline {
	margin-top: 3px;
	padding-left: 8px;

	color: var(--dash-blue);
	font-family: 'MontserratSemiBold', Arial, sans-serif;
	font-size: clamp(15px, 1.15vw, 19px);
	font-weight: 600;
	letter-spacing: .01em;
}

.banner {
	position: absolute;
	top: -21px;
	left: -12px;

	z-index: 2;

	padding: 3px 10px;

	color: #fff;
	background: #d73535;

	border-radius: 4px;

	font-family: 'RobotoCondensedBold', Arial, sans-serif;
	font-size: 18px;
	line-height: 1;
	letter-spacing: .08em;

	transform: rotate(-7deg);
}

.intro-panel {
	padding: 4px 4px 4px 12px;
}

.intro-text {
	margin: 0 0 7px;
}

.intro-links {
	margin: 0;
}

.meta-panel {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: 12px 16px;

	color: var(--muted);
	background: rgba(255,255,255,.52);
	border-left: 3px solid rgba(0,141,228,.22);
	border-radius: 0 10px 10px 0;
}

.meta-panel p {
	margin: 0 0 6px;
}

.meta-panel p:last-child {
	margin-bottom: 0;
}

.hint {
	color: var(--dash-dark);
	font-family: 'RobotoCondensedBold', Arial, sans-serif;
}


/* ---------- utility row ---------- */

.utility-row {
	display: grid;
	grid-template-columns: minmax(250px, .7fr) minmax(420px, 1.5fr) auto;
	gap: var(--gap);
	align-items: stretch;

	margin-bottom: var(--gap);
}

.box {
	position: relative;
	min-width: 0;

	padding: clamp(16px, 1.5vw, 23px);

	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);

	box-shadow: var(--shadow);

	text-align: left;

	transition:
		box-shadow .25s ease,
		border-color .25s ease;
}

.box:hover {
	box-shadow: 0 7px 24px rgba(28, 48, 58, .11);
	border-color: #cbd8de;
}

.utility-box {
	min-height: 104px;
}

.share-box {
	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 125px;

	border: 1px solid var(--border);
	color: var(--dash-dark);
	background: rgba(255,255,255,.72);

	font: inherit;
	cursor: pointer;
}

.share-box:hover {
	background: #fff;
}

.control-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	align-items: center;

	margin: 5px 0;
}

.utility-links {
	margin: 0;
	line-height: 1.65;
}

.separator {
	color: #a6afb4;
	padding: 0 3px;
}


/* ---------- subtitles ---------- */

.subtitle {
	position: relative;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 7px;

	margin: -5px -5px 18px;
	padding: 8px 13px;

	color: #fff;
	background: var(--dash-blue);

	border-radius: 9px;

	font-family: 'MontserratSemiBold', Arial, sans-serif;
	font-size: clamp(14px, .35vw + 12px, 18px);
	font-weight: 600;
	line-height: 1.3;
}

.subtitle .bold,
.subtitle .boldsub {
	font-family: 'MontserratSemiBold', Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
}

.subtitle .boldsub {
	font-family: 'MontserratSemiBoldItalic', Arial, sans-serif;
	font-style: italic;
}

.subtitle .bubble {
	margin-left: auto;
}

.subsubtitle {
	margin-bottom: 12px;

	color: #fff;
	background: #69757b;

	font-family: 'RobotoCondensedBold', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
}


/* ---------- main dashboard ---------- */

.dashboard {
	display: grid;
	grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr);
	gap: var(--gap);
	align-items: start;
}

.market-card,
.yearly-card,
.historical-card {
	animation: unfold .75s ease-out both;
}

.market-card {
	animation-delay: .08s;
}

.yearly-card {
	animation-delay: .18s;
}

.historical-card {
	grid-column: 1 / -1;
	animation-delay: .28s;
}


/* ---------- market metric ---------- */

.metric-value {
	min-height: 112px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	padding: 10px;

	color: var(--dash-dark);
	font-family: 'MontserratSemiBold', Arial, sans-serif;

}

span.bigger {
	color: var(--dash-blue);

	font-family: 'MontserratSemiBold', Arial, sans-serif;
	font-size: clamp(34px, 4vw, 58px);
	font-weight: 600;
	line-height: 1;
}

span.decimals {
	font-size: .68em;
}

span.quitebold {
	font-weight: 600;
	color: var(--text);
}

img.D {
	width: auto;
	height: 18px;
	opacity: .68;
	vertical-align: -.08em;
}


/* ---------- yearly earnings ---------- */

.tree {
	position: absolute;
	right: 10px;
	top: -24px;

	width: clamp(55px, 7vw, 78px);

	opacity: .22;
	pointer-events: none;

	transition: opacity .25s ease, transform .25s ease;
}

.yearly-card:hover .tree {
	opacity: .45;
	transform: translateY(-2px);
}

.node-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.node-card {
	position: relative;
	min-width: 0;

	padding: 15px 16px 13px;

	background: rgba(242,247,249,.72);
	border: 1px solid #e0e8eb;
	border-radius: 10px;

	cursor: help;
}

.node-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 7px;

	margin-bottom: 10px;

	font-size: clamp(17px, .35vw + 16px, 20px);
}

.node-setting {
	color: var(--muted);
	font-size: .9em;
}

.result-line,
.result-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;

	min-height: 30px;
}

.result-note {
	margin-top: 4px;
	padding-left: 1px;

	color: var(--muted);
}

.node-tip {
	position: absolute;
	right: 10px;
	bottom: 9px;
}

.green {
	color: var(--dash-green);
	font-size: clamp(20px, 1.2vw + 10px, 27px);
	font-weight: 700;
	font-family: 'MontserratSemiBold', Arial, sans-serif;
}

.about,
.peryear {
	color: var(--muted);
}
.about {
	font-size: larger;
}

.peryear {
	font-size: clamp(12px, .35vw + 10px, 15px);
}

.arrow {
	color: var(--dash-dark);
	opacity: .55;
	font-family: Arial, sans-serif;
}


/* ---------- historical comparison ---------- */

.history-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.history-node {
	min-width: 0;

	padding: 18px;

	background: rgba(247,249,250,.82);
	border: 1px solid #e2e8eb;
	border-radius: 10px;
}

.history-node h3 {
	margin: 0 0 13px;

	color: var(--dash-dark);

	font-family: 'MontserratSemiBold', Arial, sans-serif;
	font-size: clamp(16px, .45vw + 14px, 20px);
}

.history-line {
	display: block;

	margin: 8px 0;

	line-height: 1.5;
}

.history-line.indented {
	padding-left: clamp(16px, 2vw, 34px);
}

.history-line .bubble {
	margin-left: 5px;
}

hr {
	border: 0;
	border-top: 1px dotted #a8c4d0;
	margin: 17px 0;
}


/* ---------- small text / emphasis ---------- */

.small {
	font-size: clamp(14px, .3vw + 12px, 17px);
	line-height: 1.45;
}

.smaller {
	font-size: clamp(12px, .25vw + 11px, 14px);
	line-height: 1.4;
}

.Roboto-bold {
	font-family: 'RobotoCondensedBold', Arial, sans-serif;
	font-weight: 600 !important;
}

.bold {
	font-family: 'RobotoCondensedBold', Arial, sans-serif;
	font-weight: 600 !important;
}

.boldsub {
	font-family: 'MontserratSemiBoldItalic', Arial, sans-serif;
	font-weight: 600;
	font-style: italic;
}

.blue {
	color: var(--dash-blue);
}

a,
a:visited {
	color: var(--dash-blue);
	text-decoration: none;
	transition: background .2s ease;
	background: transparent;
}

a:hover {
	text-decoration: none;
	background:
		radial-gradient(
			circle at center,
			rgba(142,215,237,.85),
			rgba(142,215,237,0)
		);
}

a.refresh {
	white-space: nowrap;
}

span.info {
	padding-left: 2px;
	cursor: help;
}

span.subblock,
div.subblock {
	display: inline-block;
}

span.indentright {
	margin-left: 30px;
}
div.new {
	background-color: rgb(255, 255, 171);
	margin-top: 19px;
	padding: 0px 7px;
	font-size: clamp(11px, .22vw + 14px, 15px);
	border-left: 3px solid #edf689;
}


/* ---------- bubbles ---------- */

.bubble {
	display: inline-block;

	max-width: 100%;

	padding: 3px 9px;

	color: #fff;
	background: #b9c1c5;

	border-radius: 14px;

	font-family: 'RobotoCondensedRegular', Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;

	white-space: nowrap;

	cursor: help;
	transition: background-color .25s ease, transform 0.5s ease-out;
	transform-origin: left;
	transform: scale(1);
}

.bubble:hover {
	background-color: #69757b;
	transform: scale(1.15);
	transform-origin: left;
	transition: background-color .25s ease, transform 0.25s ease-out;
}


/* ---------- forms ---------- */

select.menu,
option.menu,
input.partial {
	font-family: 'RobotoCondensedRegular', Arial, sans-serif;
	font-size: 15px;
}

select.menu {
	min-width: 0;
	max-width: 100%;

	padding: 3px 6px;

	color: var(--text);
	background: #fff;

	border: 1px solid #cbd4d8;
	border-radius: 5px;
}

input.partial {
	width: calc(4ch + 2em);

	padding: 3px 5px;

	text-align: center;

	background: rgba(255,255,255,.9);

	appearance: none;

	border: 1px solid #cbd4d8;
	border-radius: 5px;
}


/* ---------- price alert / miscellaneous ---------- */

.pricealert {
	display: inline-block;

	padding: 4px 12px;
	margin-left: 8px;

	color: #fff;
	background: #d73535;

	border-radius: 5px;

	font-size: 14px;
	line-height: 1.3;
}

.earning-update {
	display: inline-block;
	animation: bounce-update .6s ease-in-out;
}


/* ---------- corner illustration ---------- */

.corner-art {
	position: fixed;
	z-index: 0;

	left: 0;
	bottom: 0;

	width: var(--corner-width);
	height: auto;

	pointer-events: none;
	user-select: none;
}

.market-card .subtitle,
.yearly-card .subtitle,
.historical-card .subtitle {
	font-family: 'MontserratSemiBold', Arial, sans-serif;
	font-weight: 600;
}


/* ---------- Tippy ---------- */

.tippy-content {
	color: #fff;
	background: var(--dash-dark);
	font-size: 14px;
}

.tippy-box {
	opacity: .95;

	padding: 11px;

	color: #fff;
	background: var(--dash-dark);

	border-radius: 9px;
}

.tippy-box .tippy-arrow {
	color: var(--dash-dark);
}


/* ---------- animation ---------- */

@keyframes unfold {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bounce-update {
	0%,
	100% {
		transform: scale(1);
		color: inherit;
		background: transparent;
	}

	20%,
	60% {
		transform: scale(1.22);
		color: var(--dash-green);
		background:
			radial-gradient(
				circle at center,
				rgba(255,249,78,1),
				rgba(255,249,78,0)
			);
	}

	40%,
	80% {
		transform: scale(1);
		color: var(--dash-green);
		background: transparent;
	}
}


/* ============================================================
   DESKTOP BREAKPOINTS
   ============================================================ */

@media (max-width: 1100px) {
	.page-header {
		grid-template-columns: minmax(250px, .8fr) minmax(280px, 1.2fr);
	}

	.meta-panel {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 3px solid rgba(0,141,228,.22);
		border-radius: 10px;
	}

	.utility-row {
		grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
	}

	.share-box {
		grid-column: 1 / -1;
		min-height: 48px;
	}

	.dashboard {
		grid-template-columns: 1fr;
	}

	.historical-card {
		grid-column: auto;
	}
}

@media (max-width: 850px) {
	.page-shell {
		width: min(100% - 28px, var(--page-width));
		padding-bottom: 230px;
	}

	.page-header,
	.utility-row,
	.dashboard {
		grid-template-columns: 1fr;
	}

	.meta-panel,
	.share-box,
	.historical-card {
		grid-column: auto;
	}

	.node-grid,
	.history-grid {
		grid-template-columns: 1fr;
	}

	.corner-art {
		width: 230px;
		left: 0;
		bottom: 0;
	}
}