/**
 * Portal shell. Figma nodes 1:739 (aside), 1:880 (top bar), 1:756 (main).
 *
 * Desktop frame is 1440: a 292px aside and a 1148px main column.
 */

.ts-portal {
	display: flex;
	min-height: 100vh;
	background: var(--ts-bg);
}

/* =========================================================================
   Aside - 1:739
   ========================================================================= */

.ts-aside {
	position: sticky;
	top: 0;
	width: 292px;
	height: 100vh;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	/* Logo sits 24 from the top; the copyright 26 from the bottom. */
	padding: 24px 24px 26px;
	background: var(--ts-ink);
}

.ts-aside__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ts-aside__logo {
	display: flex;
	align-items: center;
	gap: 12px;               /* wordmark starts at x=54, mark is 42 wide */
	height: 42px;
}

.ts-aside__mark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 14px;
	background: var(--ts-white);
	color: var(--ts-brand);
	font-size: 24px;
	font-weight: 700;
}

.ts-aside__name {
	font-size: 24px;
	font-weight: 700;
	color: var(--ts-white);
}

/* Only present in the mobile drawer. */
.ts-aside__close {
	display: none;
	flex-shrink: 0;
	padding: 12px;
	border-radius: var(--ts-r-pill);
	background: var(--ts-brand);
	color: var(--ts-white);
}

/* ---- nav ---- */

.ts-aside__nav { margin-top: 22px; }   /* nav starts at y=88 */

.ts-aside__nav ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ts-aside__link {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 16px;
	border-radius: 18px;
	font-size: var(--ts-b1-size);
	font-weight: 700;
	color: var(--ts-white);
	transition: background-color .15s ease;
}

.ts-aside__icon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.ts-aside__link.is-current { background: var(--ts-brand); }

@media (hover: hover) {
	.ts-aside__link:not(.is-current):hover { background: rgba(255, 255, 255, .07); }
}

/* ---- plan card ---- */

.ts-plan {
	margin-top: auto;        /* pins to the bottom of the aside */
	height: 230px;
	padding: 21px 20px 22px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 26px;
	background: linear-gradient(144.99deg, #413fc9 0%, #242239 100%);
}

/* Figma pins these two blocks to fixed heights (42 and 40) that are shorter
   than their line boxes, then centres the text inside. Letting them size
   naturally pushed the button 13px out through the bottom of the card. */
.ts-plan__head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 42px;
	color: var(--ts-white);
}

.ts-plan__head span { font-size: var(--ts-b1-size); }
.ts-plan__head b { font-size: 22px; font-weight: 700; }

.ts-plan__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 40px;
	margin-top: 22px;
	/* This block alone is inset to right:16.85 rather than the card's 20. The
	   missing 4px was forcing "requires the" onto a third line. */
	margin-right: -5px;
	font-size: var(--ts-b1-size);
	line-height: 24px;
	color: #d8d8ef;
}

.ts-plan__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 47px;
	margin-top: 36px;
	border-radius: var(--ts-r-pill);
	background: var(--ts-white);
	color: var(--ts-ink);
	font-size: var(--ts-b1-size);
	font-weight: 700;
}

.ts-aside__copy {
	margin-top: 23px;
	font-size: 13.3px;
	color: #aeb2c8;
}

/* =========================================================================
   Main column
   ========================================================================= */

.ts-portal__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ts-portal__topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 78px;
	padding-inline: 36px;
	background: var(--ts-surface-alt);
}

.ts-portal__burger {
	display: none;
	flex-shrink: 0;
	color: var(--ts-ink);
}

.ts-portal__title {
	flex: 1;
	min-width: 0;
	font-size: 30px;
	line-height: 40px;
	letter-spacing: -1px;
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-usermenu {
	position: relative;
	flex-shrink: 0;
}

.ts-portal__user {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--ts-b1-size);
	font-weight: 700;
	color: var(--ts-ink);
	white-space: nowrap;
	cursor: pointer;
}

.ts-portal__chev { transition: transform .2s ease; }

.ts-portal__user[aria-expanded='true'] .ts-portal__chev { transform: rotate(180deg); }

.ts-usermenu__list {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 50;
	min-width: 200px;
	padding: 8px;
	border: 1px solid var(--ts-hairline);
	border-radius: 18px;
	background: var(--ts-white);
	box-shadow: 0 18px 40px rgba(26, 26, 35, .14);
}

.ts-usermenu__list[hidden] { display: none; }

.ts-usermenu__list a {
	display: block;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: var(--ts-b1-size);
	font-weight: 700;
	color: var(--ts-ink);
	white-space: nowrap;
	transition: background-color .15s ease;
}

.ts-usermenu__list a:hover,
.ts-usermenu__list a:focus-visible { background: var(--ts-bg-soft); }

@media (prefers-reduced-motion: reduce) {
	.ts-portal__chev,
	.ts-usermenu__list a { transition: none; }
}

.ts-portal__avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #e0def7;
	color: var(--ts-brand);
	font-weight: 700;
}

.ts-portal__chev { display: grid; place-items: center; color: var(--ts-ink); }

.ts-portal__content {
	flex: 1;
	padding: 36px;
}

.ts-portal__risk {
	max-width: 800px;
	margin-top: 40px;
	font-size: 13px;
	line-height: 21.45px;
	color: #8b8fa3;
}

/* =========================================================================
   Screens
   ========================================================================= */

/* ---- Download MT5 Demo - 1:952 ---- */

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

.ts-download {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 104px;
	padding: 24px;
	border-radius: 24px;
	background: var(--ts-white);
}

.ts-download__txt b {
	display: block;
	font-size: var(--ts-h3-size);
	line-height: 32px;
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-download__txt span {
	display: block;
	margin-top: 4px;
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	color: var(--ts-text);
}

.ts-download__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 14px 22px;
	border-radius: var(--ts-r-pill);
	background: var(--ts-brand);
	color: var(--ts-white);
	font-size: var(--ts-b1-size);
	font-weight: 700;
	transition: background-color .15s ease, transform .15s ease;
}

@media (hover: hover) {
	.ts-download__cta:hover { background: #3a38b8; transform: translateY(-1px); }
}

/* ---- generic screen card, used by the three screens Figma does not draw ---- */

.ts-pcard {
	padding: 28px;
	border-radius: 30px;
	background: var(--ts-white);
}

.ts-pcard + .ts-pcard { margin-top: 20px; }

.ts-pcard__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(65, 63, 201, .1);
	color: var(--ts-brand);
}

.ts-pcard__title {
	margin-top: 18px;
	font-size: var(--ts-h3-size);
	line-height: var(--ts-h3-lh);
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-pcard__body {
	margin-top: 10px;
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	color: var(--ts-text);
}

.ts-pcard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.ts-pcard__title--flush { margin-top: 0; }

.ts-btn--block { width: 100%; }

/* ---- Updated Performance layout - 1:757 + 1:888 ---- */

.ts-perf {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.ts-perf__main { flex: 1; min-width: 0; }

.ts-perf__rail {
	width: 380px;            /* Frame 69 is 380 wide at x=732 */
	flex-shrink: 0;
}

/* ---- equity card - 1:808 ---- */

.ts-eqcard,
.ts-trades {
	/* 24 inset, 26 at the foot - both less nothing, the border sits outside the
	   Figma frame measurement here. */
	padding: 24px 24px 26px;
	border: 1px solid var(--ts-hairline);
	border-radius: 30px;
	background: var(--ts-white);
	box-shadow: 0 24px 35px rgba(26, 26, 35, .1);
}

.ts-trades { margin-top: 22px; }

.ts-eqcard__head,
.ts-trades__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ts-eqcard__title,
.ts-trades__title {
	font-size: var(--ts-h3-size);
	line-height: 32px;
	letter-spacing: -.96px;
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-eqcard__tabs {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.ts-eqchip {
	height: 37px;
	padding-inline: 16px;
	border: 1px solid var(--ts-hairline);
	border-radius: var(--ts-r-pill);
	background: #f7f6fa;
	color: #596073;
	font-size: 13.3px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

/* The active chip here is ink, not brand - unlike the landing page toggle. */
.ts-eqchip.is-active {
	background: var(--ts-ink);
	color: var(--ts-white);
}

.ts-eqpanel[hidden] { display: none; }

.ts-eqcard__plot { margin-top: 23px; }

.ts-eq {
	display: block;
	width: 100%;
	height: 226px;
	overflow: visible;
}

.ts-eq__grid {
	stroke: #c8c8c8;
	stroke-width: 1;
	opacity: .5;
}

.ts-eq__line {
	fill: none;
	stroke: #8785f1;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.ts-eq__dot { fill: var(--ts-brand); }

.ts-eq__ylabel,
.ts-eq__xlabel {
	font-family: var(--ts-font);
	font-size: 14.887px;
	fill: #1a1a23;
}

.ts-eq__ylabel { text-anchor: end; }
.ts-eq__xlabel { text-anchor: middle; }

/* ---- KPI row ---- */

.ts-kpis {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.ts-kpi {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 73px;
	padding-inline: 14px;
	border-radius: 18px;
	background: #f7f6fa;
}

.ts-kpi span {
	font-size: var(--ts-b1-size);
	color: var(--ts-ink);
}

.ts-kpi b {
	font-size: 22px;
	font-weight: 700;
	color: var(--ts-ink);
}

/* ---- recent trades - 1:758 ---- */

.ts-trades__all {
	font-size: var(--ts-b1-size);
	font-weight: 700;
	color: var(--ts-brand);
	white-space: nowrap;
}

.ts-trades__scroll {
	margin-top: 15.5px;
	overflow-x: auto;
}

.ts-trades__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ts-b1-size);
}

.ts-trades__table th,
.ts-trades__table td {
	height: 48px;
	padding-inline: 14px;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--ts-hairline);
	color: var(--ts-ink);
}

.ts-trades__table th {
	height: 47.5px;
	font-weight: 700;
}

.ts-trades__table tbody tr:last-child td { border-bottom: 0; }

/* Trades use their own green and red, distinct from the landing page pair. */
.ts-trades__table td.is-pos { color: #0aa66a; font-weight: 700; }
.ts-trades__table td.is-neg { color: #d74650; font-weight: 700; }

.ts-trades__table td:first-child,
.ts-trades__table td:nth-child(3) { font-weight: 400; }

/* ---- tutorial list ---- */

.ts-tutorials {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;
}

.ts-tutorial {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
	border-radius: 18px;
	background: var(--ts-bg-soft);
}

.ts-tutorial__txt b {
	display: block;
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-tutorial__txt span {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--ts-text);
}

.ts-tutorial__play {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	color: var(--ts-brand);
}

/* =========================================================================
   Portal mobile - 1:1012 / 1:986
   ========================================================================= */

@media (max-width: 1100px) {

	.ts-portal { display: block; }

	/* Aside becomes the drawer from 1:986. */
	.ts-aside {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 200;
		width: min(320px, 88vw);
		height: 100vh;
		transform: translateX(-100%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			transform .3s cubic-bezier(.22, 1, .36, 1),
			opacity .2s ease,
			visibility 0s linear .3s;
	}

	.ts-aside[data-open='true'] {
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition:
			transform .3s cubic-bezier(.22, 1, .36, 1),
			opacity .2s ease,
			visibility 0s;
	}

	.ts-aside__close { display: block; }

	.ts-portal__burger { display: grid; place-items: center; }

	/* Dark bar with the logo, matching the mobile portal frame. */
	.ts-portal__topbar {
		height: auto;
		padding: 16px 20px;
		background: var(--ts-white);
	}

	.ts-portal__title { font-size: 22px; line-height: 30px; }
	.ts-portal__user-label { display: none; }

	.ts-portal__content { padding: 20px; }

	.ts-downloads { grid-template-columns: minmax(0, 1fr); }

	/* Right rail drops below the main column, in source order.
	   align-items must become stretch: inherited as flex-start, a column flex
	   sizes its items to their content width, so the main column grew to fit
	   the nowrap trades table and pushed every card past the viewport. */
	.ts-perf {
		flex-direction: column;
		align-items: stretch;
	}

	.ts-perf__main,
	.ts-perf__rail {
		width: 100%;
		min-width: 0;
	}

	/* Title takes its own row so it stays on one line; chips move below. */
	.ts-eqcard__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.ts-eqcard__title {
		font-size: 20px;
		line-height: 28px;
	}

	.ts-eqcard__tabs { width: 100%; }

	.ts-eqchip {
		flex: 1 0 0;
		min-width: 0;
		padding-inline: 10px;
	}

	/* The table scrolls inside the card rather than widening it. */
	.ts-trades__scroll { max-width: 100%; }

	body.ts-menu-open { overflow: hidden; }
}

/* =========================================================================
   Phone scale

   A separate, narrower tier from the 1100px stacking rules above: tablets have
   the room for desktop sizing, phones do not. Everything here is type and
   spacing only - no layout changes.
   ========================================================================= */

@media (max-width: 700px) {

	.ts-portal__content { padding: 16px; }

	.ts-portal__topbar { padding: 14px 16px; }
	.ts-portal__title { font-size: 20px; line-height: 28px; }

	.ts-portal__avatar {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	/* ---- cards ---- */
	.ts-eqcard,
	.ts-trades {
		padding: 18px;
		border-radius: 22px;
	}

	.ts-trades { margin-top: 16px; }

	.ts-eqcard__title,
	.ts-trades__title {
		font-size: 18px;
		line-height: 26px;
		letter-spacing: -.4px;
	}

	.ts-eqchip {
		height: 34px;
		font-size: 12.5px;
	}

	/* ---- equity chart: scroll rather than squeeze ----
	   Thirty points crammed into ~290px is unreadable. The chart keeps a
	   legible width and the plot scrolls sideways, which is what the mobile
	   Figma frame does too. */
	.ts-eqcard__plot {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--ts-brand-light) var(--ts-bg);
		padding-bottom: 8px;
	}

	.ts-eq {
		min-width: 560px;
		height: 200px;
	}

	.ts-eqcard__plot::-webkit-scrollbar { height: 6px; }

	.ts-eqcard__plot::-webkit-scrollbar-track {
		background: var(--ts-bg);
		border-radius: 999px;
	}

	.ts-eqcard__plot::-webkit-scrollbar-thumb {
		background: var(--ts-brand);
		border-radius: 999px;
	}

	/* ---- KPI row ---- */
	.ts-kpis { gap: 8px; }

	.ts-kpi {
		height: 58px;
		padding-inline: 11px;
		border-radius: 14px;
	}

	.ts-kpi span { font-size: 12px; line-height: 16px; }
	.ts-kpi b    { font-size: 17px; line-height: 22px; }

	/* ---- trades table ---- */
	.ts-trades__all { font-size: 14px; }

	.ts-trades__table { font-size: 14px; }

	.ts-trades__table th,
	.ts-trades__table td {
		height: 42px;
		padding-inline: 10px;
	}

	.ts-trades__table th { height: 40px; }

	.ts-trades__scroll {
		scrollbar-width: thin;
		scrollbar-color: var(--ts-brand-light) var(--ts-bg);
	}

	.ts-trades__scroll::-webkit-scrollbar { height: 6px; }
	.ts-trades__scroll::-webkit-scrollbar-track { background: var(--ts-bg); border-radius: 999px; }
	.ts-trades__scroll::-webkit-scrollbar-thumb { background: var(--ts-brand); border-radius: 999px; }

	/* ---- generic screen cards ---- */
	.ts-pcard {
		padding: 20px;
		border-radius: 22px;
	}

	.ts-pcard + .ts-pcard { margin-top: 16px; }

	.ts-pcard__icon {
		width: 38px;
		height: 38px;
		border-radius: 12px;
	}

	.ts-pcard__title {
		margin-top: 14px;
		font-size: 18px;
		line-height: 26px;
	}

	.ts-pcard__body { font-size: 14px; line-height: 20px; }

	.ts-pcard__actions .ts-btn {
		padding: 12px 18px;
		font-size: 14px;
		line-height: 20px;
	}

	/* ---- downloads ---- */
	.ts-download {
		min-height: 88px;
		padding: 18px;
		border-radius: 20px;
		gap: 14px;
	}

	.ts-download__txt b { font-size: 18px; line-height: 26px; }
	.ts-download__txt span { font-size: 14px; line-height: 20px; }

	.ts-download__cta {
		padding: 11px 16px;
		font-size: 14px;
	}

	/* ---- tutorials ---- */
	.ts-tutorials { gap: 10px; margin-top: 14px; }

	.ts-tutorial {
		padding: 13px;
		border-radius: 15px;
	}

	.ts-tutorial__txt b { font-size: 14px; line-height: 20px; }
	.ts-tutorial__txt span { font-size: 12px; }

	.ts-tutorial__play { width: 28px; height: 28px; }

	.ts-portal__risk {
		margin-top: 28px;
		font-size: 12px;
		line-height: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ts-aside,
	.ts-aside[data-open='true'] {
		transform: none;
		transition: visibility 0s;
	}

	.ts-aside__link,
	.ts-download__cta { transition: none; }
}

/* ---- language switcher in the portal top bar ---- */

.ts-lang--portal { margin-left: auto; }

@media (max-width: 700px) {
	.ts-lang--portal .ts-lang__toggle { padding: 6px 8px; font-size: 13px; }
	.ts-lang--portal .ts-lang__code { display: none; }
}