/**
 * Topline Vault — phone layout (v1.24.0).
 * Phone only (up to 767px). Computer and tablet are unchanged.
 * Bottom menu like an app, calmer Home, tidier Orders, Add a track in steps.
 */

/* Hidden everywhere except phones */
.lv-tv .lv-ph-nav,
.lv-tv .lv-ph-sheet,
.lv-tv .lv-ph-dim,
.lv-tv .lv-ph-stepbar,
.lv-tv .lv-ph-stepnav,
.lv-tv .lvst-ph-more { display: none !important; }

/* Strike and warning messages: Love Vocals red, never amber */
.lv-tv .lv-message-warning { border-left-color: #910304 !important; }

@media (max-width: 767px) {

	/* ---------- Bottom menu ---------- */
	body.lv-ph-on { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
	.lv-tv .lv-tabs-nav { display: none !important; }

	.lv-tv .lv-ph-nav {
		display: flex !important;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
		height: calc(68px + env(safe-area-inset-bottom, 0px));
		padding: 6px 4px env(safe-area-inset-bottom, 0px);
		background: rgba(18, 16, 32, .97);
		-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		border-top: 1px solid rgba(255, 255, 255, .1);
		justify-content: space-around; align-items: stretch;
	}
	.lv-tv .lv-ph-it {
		flex: 1 1 0; min-width: 0;
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
		position: relative;
		background: none !important; border: 0 !important; box-shadow: none !important;
		color: #9a93b5 !important; font: 600 11px/1.1 "LVS Inter", Inter, Arial, sans-serif !important;
		padding: 4px 0 !important; margin: 0 !important; cursor: pointer; border-radius: 12px;
		-webkit-tap-highlight-color: transparent;
	}
	.lv-tv .lv-ph-it svg { width: 24px; height: 24px; }
	.lv-tv .lv-ph-it.is-on { color: #fff !important; }
	.lv-tv .lv-ph-it.is-on svg { color: #7756FD; }
	.lv-tv .lv-ph-it:focus-visible,
	.lv-tv .lv-ph-grid button:focus-visible { outline: 2px solid #13FFDA; outline-offset: 2px; }

	.lv-tv .lv-ph-bd {
		position: absolute; top: 0; left: calc(50% + 6px);
		min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
		background: #910304; color: #fff; font: 800 10.5px/18px "LVS Inter", Inter, Arial, sans-serif; text-align: center;
	}
	.lv-tv .lv-ph-bd.mint { background: #13FFDA; color: #0d0b14; }

	/* "More" sheet */
	.lv-tv .lv-ph-dim:not([hidden]) {
		display: block !important; position: fixed; inset: 0; z-index: 9988; background: rgba(0, 0, 0, .55);
	}
	.lv-tv .lv-ph-sheet:not([hidden]) {
		display: block !important;
		position: fixed; left: 0; right: 0; z-index: 9989;
		bottom: calc(68px + env(safe-area-inset-bottom, 0px));
		padding: 10px 16px 18px;
		background: #1a1729; border-top: 1px solid rgba(255, 255, 255, .1);
		border-radius: 24px 24px 0 0;
		animation: lvPhUp .2s ease;
	}
	@keyframes lvPhUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
	.lv-tv .lv-ph-grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); margin: 0 auto 14px; }
	.lv-tv .lv-ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.lv-tv .lv-ph-grid button {
		position: relative;
		display: flex; flex-direction: column; align-items: center; gap: 6px;
		padding: 14px 4px !important; margin: 0 !important;
		background: #181526 !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 14px !important;
		color: #f3f1fa !important; font: 600 12px/1.2 "LVS Inter", Inter, Arial, sans-serif !important; cursor: pointer;
	}
	.lv-tv .lv-ph-grid button svg { width: 24px; height: 24px; color: #13FFDA; }
	.lv-tv .lv-ph-grid button.is-on { border-color: #7756FD !important; background: rgba(119, 86, 253, .18) !important; }
	.lv-tv .lv-ph-grid .lv-ph-bd { top: 6px; left: auto; right: 8px; }

	/* ---------- Home ---------- */
	.lv-tv .lv-tab-content[data-tab="home"].active { display: flex !important; flex-direction: column; }
	.lv-tv .lv-tab-content[data-tab="home"] > * { order: 2; min-width: 0; } /* banners (collab requests, offers, trial) sit under Action needed */
	.lv-tv .lv-tab-content[data-tab="home"] > .lv-home-head { order: 0; margin-bottom: 16px !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
	.lv-tv .lv-tab-content[data-tab="home"] > .lv-home-2col:not(.lv-home-more) { order: 1; margin-bottom: 14px !important; }
	.lv-tv .lv-tab-content[data-tab="home"] > .lv-home-metrics { order: 3; }
	.lv-tv .lv-tab-content[data-tab="home"] > .lv-home-pending { order: 5; }
	.lv-tv .lv-tab-content[data-tab="home"] > .lvst-dash { order: 4; }
	.lv-tv .lv-tab-content[data-tab="home"] h1[style] { font-size: 24px !important; }
	.lv-tv .lv-home-head > div:last-child { width: 100%; display: flex !important; flex-direction: row-reverse; gap: 10px !important; }
	.lv-tv .lv-home-head > div:last-child > a { flex: 1 1 0; justify-content: center; text-align: center; padding: 12px 10px !important; border-radius: 12px !important; font-size: 14px !important; }

	/* Action card first, storefront card later */
	.lv-tv .lv-home-2col { display: block !important; }
	.lv-tv .lv-home-2col:not(.lv-home-more) > div:last-child { display: none !important; }
	.lv-tv .lv-tab-content[data-tab="home"] > .lv-home-more { order: 6; }
	.lv-tv .lv-home-more > div:first-child { display: none !important; }
	.lv-tv .lv-home-2col > div:first-child { border-radius: 16px !important; padding: 14px 16px !important; }
	.lv-tv .lv-home-2col .lv-home-cta { padding: 10px 16px !important; border-radius: 10px !important; font-size: 13px !important; }

	/* The four numbers, 2 by 2 and compact */
	html body .lv-tv .lv-tab-content[data-tab="home"] > .lv-home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 14px !important; }
	.lv-tv .lv-home-metrics > div { padding: 12px !important; border-radius: 14px !important; min-width: 0; }
	.lv-tv .lv-home-metrics > div > div:first-child { margin-bottom: 6px !important; }
	.lv-tv .lv-home-metrics > div > div:first-child > span:first-child { display: none !important; }
	.lv-tv .lv-home-metrics h3 { font-size: 10.5px !important; }
	.lv-tv .lv-home-metrics p[style*="font-size: 28px"] { font-size: 22px !important; }
	.lv-tv .lv-home-metrics p[style*="font-size: 11px"] { display: none !important; }

	/* Stars: one small line, tap to see progress */
	.lv-tv .lvst-dash { display: block !important; padding: 12px 14px !important; border-radius: 14px !important; cursor: pointer; }
	.lv-tv .lvst-dash h3 { display: none; }
	.lv-tv .lvst-dash .lvst-pr,
	.lv-tv .lvst-dash .lvst-warn,
	.lv-tv .lvst-dash .lvst-next p { display: none; }
	.lv-tv .lvst-dash .lvst-next { padding: 0 !important; margin-top: 8px; background: none !important; border: 0 !important; }
	.lv-tv .lvst-dash .lvst-next h4 { font-size: 13.5px !important; font-weight: 600; color: #cfcbe0 !important; margin: 0 !important; }
	.lv-tv .lvst-dash .lvst-ph-more { display: inline-block !important; margin-top: 8px; color: #13FFDA; font-size: 13px; font-weight: 700; }
	.lv-tv .lvst-dash.is-open .lvst-pr,
	.lv-tv .lvst-dash.is-open .lvst-warn,
	.lv-tv .lvst-dash.is-open .lvst-next p { display: block; }
	.lv-tv .lvst-dash.is-open .lvst-pr { display: grid; }

	/* ---------- Orders ---------- */
	.lv-tv .lv-so .lv-so-filters {
		display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important;
		margin: 4px -16px 10px !important; padding: 2px 16px 6px; scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.lv-tv .lv-so .lv-so-filters::-webkit-scrollbar { display: none; }
	.lv-tv .lv-tf .lv-so .lv-so-chip, .lv-tv .lv-so .lv-so-chip { flex: 0 0 auto !important; width: auto !important; white-space: nowrap; }

	/* Long info boxes fold to one line; tap to open */
	.lv-tv .lv-ph-fold { position: relative; cursor: pointer; padding-right: 76px !important; }
	.lv-tv .lv-ph-fold::after {
		content: "Details"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
		color: #13FFDA; font-size: 13px; font-weight: 700;
	}
	.lv-tv .lv-ph-fold.is-open::after { content: "Close"; top: 18px; transform: none; }
	.lv-tv .lv-ph-fold:not(.is-open) .lv-message-text,
	.lv-tv .lv-ph-fold:not(.is-open) > span { display: none !important; }
	.lv-tv .lv-ph-fold .lv-message-title { margin: 0 !important; font-size: 14px !important; }
	.lv-tv .lv-so .lv-tf-lede { font-size: 14px; }

	/* ---------- Add a track, one step at a time ---------- */
	.lv-tv form.lv-ph-steps .lv-tf-section:not(.lv-ph-cur) { display: none !important; }
	.lv-tv form.lv-ph-steps:not(.lv-ph-last) .lv-tf-footer,
	.lv-tv form.lv-ph-steps:not(.lv-ph-last) .lv-tf-buy { display: none !important; }
	.lv-tv form.lv-ph-steps .lv-tf-lede { display: none; }
	.lv-tv form.lv-ph-steps:not(.lv-ph-first) .lv-tf-header { display: none !important; }

	.lv-tv form.lv-ph-steps .lv-ph-stepbar { display: block !important; margin: 0 0 12px; }
	.lv-tv .lv-ph-stepbar p { margin: 0 0 8px; color: #9a93b5; font-size: 13px; font-weight: 600; }
	.lv-tv .lv-ph-stepbar ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
	.lv-tv .lv-ph-stepbar li { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
	.lv-tv .lv-ph-stepbar li.on { background: #7756FD; }

	.lv-tv form.lv-ph-steps .lv-ph-stepnav {
		display: flex !important; gap: 10px;
		position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 5;
		margin: 14px -4px 0; padding: 12px 4px;
		background: linear-gradient(rgba(13, 11, 20, 0), #0d0b14 30%);
	}
	.lv-tv form.lv-ph-steps.lv-ph-last .lv-ph-stepnav { position: static; background: none; padding-bottom: 0; }
	.lv-tv .lv-ph-stepnav button {
		flex: 1 1 0; min-height: 48px; border-radius: 12px !important; font: 700 15px/1 "LVS Inter", Inter, Arial, sans-serif !important; cursor: pointer;
	}
	.lv-tv .lv-ph-stepnav .lv-ph-back { background: #0d0b14 !important; color: #cfcbe0 !important; border: 1px solid rgba(255, 255, 255, .16) !important; }
	.lv-tv .lv-ph-stepnav .lv-ph-next { background: #7756FD !important; color: #fff !important; border: 0 !important; }

	/* Nothing spills sideways */
	.lv-tv .lv-tf-wrap, .lv-tv .lv-tf-section, .lv-tv .lv-tf-field { min-width: 0; max-width: 100%; }
	.lv-tv .lv-tf-section input:not([type="checkbox"]):not([type="radio"]),
	.lv-tv .lv-tf-section select,
	.lv-tv .lv-tf-section textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
}