/* ============================================================
   DASH YIELD - SMARTPHONE
   Loaded last (after style.css, style-dark.css, style-interactions.css).
   Targets small touchscreens, below the existing 850px breakpoint
   already handled in style.css.
   ============================================================ */

@media (max-width: 560px) {

	/* ---------- global rhythm ---------- */

	html {
		font-size: 15px;
	}

	body {
		font-size: clamp(14px, 3.6vw, 16px);
	}

	.page-shell {
		width: calc(100% - 20px);
		padding: 14px 0 190px;
	}

	.utility-row,
	.page-header,
	.dashboard {
		gap: 12px;
	}


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

	.brand-panel {
		padding: 4px 0;
		text-align: center;
	}

	.brand-link {
		/* .brand-link is inline-flex in style.css, so text-align alone
		   won't center it: center the flex item itself within the panel. */
		justify-content: center;
	}

	.brand-tagline {
		text-align: center;
		padding-left: 0;
	}

	img.logo {
		width: clamp(130px, 42vw, 170px);
	}

	span.subbrand {
		font-size: clamp(21px, 7vw, 28px);
		margin-bottom: 6px;
	}

	.brand-tagline {
		font-size: clamp(13px, 3.6vw, 15px);
		padding-left: 4px;
	}

	.banner {
		top: -14px;
		left: -6px;
		padding: 2px 8px;
		font-size: 13px;
	}

	.intro-panel {
		padding: 2px 0 2px 2px;
	}

	.meta-panel {
		padding: 10px 12px;
	}


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

	.box {
		padding: 14px;
	}

	.utility-box {
		min-height: 0;
	}

	.control-row {
		grid-template-columns: 1fr;
		row-gap: 4px;
		margin: 8px 0;
	}

	.control-row label {
		font-size: .92em;
	}

	select.menu {
		width: 100%;
		/* Comfortable tap target on touchscreens. */
		min-height: 40px;
	}

	.share-box {
		min-height: 46px;
	}

	.utility-links {
		line-height: 1.9;
	}


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

	.subtitle {
		margin: -4px -4px 14px;
		padding: 8px 11px;
		font-size: clamp(13px, 3.7vw, 16px);
	}

	.subtitle .bubble {
		/* On narrow screens the trailing "today ℹ️" bubble no longer
		   fits flush right next to a long wrapped title: let it drop
		   to its own line instead of forcing extra width. */
		margin-left: 0;
	}


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

	.node-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.node-card {
		padding: 13px 14px 12px;
	}

	.node-title {
		gap: 5px;
	}

	.tree {
		width: 46px;
		top: -18px;
		right: 6px;
	}

	input.partial {
		/* Slightly wider hit area for a numeric field on touch. */
		width: calc(5ch + 2em);
		min-height: 34px;
	}

	.result-line,
	.result-note {
		row-gap: 6px;
	}

	div.new {
		font-size: clamp(12px, 3.3vw, 14px);
		padding: 6px 8px;
	}


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

	.history-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.history-node {
		padding: 14px;
	}

	.history-line.indented {
		padding-left: 16px;
	}

	.history-line {
		line-height: 1.55;
	}


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

	.bubble {
		white-space: normal;
		max-width: 100%;
	}

	.bubble:hover {
		/* The hover-scale effect is a mouse affordance; on touch it just
		   causes layout jitter on tap, so keep bubbles at rest scale. */
		transform: scale(1);
	}

	.tippy-box {
		max-width: min(86vw, 300px) !important;
		font-size: 13px;
	}


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

	.corner-art {
		width: 150px;
	}


	/* ---------- theme toggle ---------- */

	.theme-toggle {
		text-align: right;
		margin-top: 8px;
	}

	.theme-toggle-button {
		padding: 6px 12px;
		/* Comfortable 44px-ish tap target per mobile accessibility guidance. */
		min-height: 40px;
	}


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

	.visit-animation-svg {
		height: min(38vh, 420px);
	}
}


/* ---------- very small phones ---------- */

@media (max-width: 360px) {

	.page-shell {
		width: calc(100% - 14px);
	}

	span.subbrand {
		font-size: 19px;
	}

	.metric-value span.bigger {
		font-size: 30px;
	}

	.node-title {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ---------- landscape phones (short viewport height) ---------- */

@media (max-width: 850px) and (max-height: 430px) and (orientation: landscape) {

	.visit-animation-svg {
		height: min(70vh, 320px);
	}

	.page-shell {
		padding-bottom: 140px;
	}

	.corner-art {
		width: 110px;
	}
}