/*
 * Tuottolaskuri Core – Kryptovaluuttalaskuri.
 * Loaded only with this calculator, after the shared tabbed-calculator styles.
 */

.tlc-cr .tlc-cr-hero .tlc-hero__img { object-position: right 55%; }

/* Purchase rows */
.tlc-cr .tlc-cr-rows { margin-top: 1.4rem; }

.tlc-cr .tlc-cr-rows__head,
.tlc-cr .tlc-cr-row {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .8fr) 44px;
	gap: .5rem;
	align-items: start;
}

.tlc-cr .tlc-cr-rows__head {
	padding-left: 2rem;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .8fr) 44px;
	margin-bottom: .35rem;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--tlc-navy);
}

.tlc-cr .tlc-cr-row { margin-bottom: .5rem; }
.tlc-cr .tlc-cr-row__num { padding-top: .8rem; font-size: .8125rem; font-weight: 700; color: var(--tlc-muted); text-align: right; }
.tlc-cr .tlc-cr-cell { min-width: 0; }
.tlc-cr .tlc-cr-cell .tlc-input { width: 100%; }
.tlc-cr .tlc-cr-cell .tlc-error:empty { display: none; }

/* Labels are announced always; shown only in the narrow card layout. */
.tlc-cr .tlc-cr-cell__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tlc-cr .tlc-cr-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: .15rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: #d0353b;
	cursor: pointer;
}

.tlc-cr .tlc-cr-remove:hover { background: #fdecea; }
.tlc-cr .tlc-cr-remove:focus-visible { outline: 3px solid var(--tlc-focus, #1769dd); outline-offset: 2px; }

@container tlc-settings (max-width: 400px) {
	.tlc-cr .tlc-cr-rows__head { display: none; }
	.tlc-cr .tlc-cr-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
		grid-template-areas: "num num remove" "qty qty qty" "price fee fee";
		gap: .35rem .6rem;
		padding: .6rem .75rem .75rem;
		border: 1px solid #e3eaf4;
		border-radius: 12px;
		background: #f8fbff;
	}
	.tlc-cr .tlc-cr-row__num { grid-area: num; padding-top: .7rem; text-align: left; }
	.tlc-cr .tlc-cr-row__num::before { content: "Osto "; }
	.tlc-cr .tlc-cr-row > .tlc-cr-cell:nth-of-type(1) { grid-area: qty; }
	.tlc-cr .tlc-cr-row > .tlc-cr-cell:nth-of-type(2) { grid-area: price; }
	.tlc-cr .tlc-cr-row > .tlc-cr-cell:nth-of-type(3) { grid-area: fee; }
	.tlc-cr .tlc-cr-remove { grid-area: remove; margin-top: 0; }
	.tlc-cr .tlc-cr-cell__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		display: block;
		margin-bottom: .2rem;
		font-size: .8125rem;
		font-weight: 600;
		color: var(--tlc-navy);
	}
}

.tlc-cr .tlc-cr-add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	min-height: 46px;
	margin-top: .5rem;
	border: 1.5px dashed #9ec0ee;
	border-radius: 12px;
	background: #f4f8fe;
	color: var(--tlc-primary);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.tlc-cr .tlc-cr-add:hover { background: #eaf2fd; }
.tlc-cr .tlc-cr-add:disabled { opacity: .5; cursor: not-allowed; }
.tlc-cr .tlc-cr-rows-note:empty { display: none; }

/* Simulation */
.tlc-cr .tlc-cr-sim { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #e3eaf4; }
.tlc-cr .tlc-cr-sim__title { margin: 0; font-size: 1.0625rem; color: var(--tlc-navy); }
.tlc-cr .tlc-cr-sim__grid { display: grid; gap: .75rem; margin-top: .85rem; }

@container tlc-settings (min-width: 400px) {
	.tlc-cr .tlc-cr-sim__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
}

.tlc-cr .tlc-cr-sim__add { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; }
.tlc-cr [data-tlc-sim-error]:empty { display: none; }

/* Results */
.tlc-cr .tlc-cr-kpis .tlc-kpi__value { font-size: clamp(1.15rem, .85rem + 1.4cqi, 1.55rem); overflow-wrap: anywhere; }
.tlc-cr .tlc-cr-kpi--sim { grid-column: 1 / -1; }
.tlc-cr .tlc-cr-kpi--sim.is-down { background: #e8f6f2; border-color: #c4e8de; }
.tlc-cr .tlc-cr-kpi--sim.is-down .tlc-kpi__value { color: var(--tlc-positive-text); }
.tlc-cr .tlc-cr-kpi--sim.is-up { background: #fff6e6; border-color: #f3dfb3; }
.tlc-cr .tlc-cr-kpi--sim.is-up .tlc-kpi__value { color: #8a5a00; }

.tlc-cr .tlc-cr-target { margin: .35rem 0 0; font-size: .9375rem; color: var(--tlc-text); }
.tlc-cr .tlc-cr-target-field { margin-top: 1rem; }
.tlc-cr .tlc-div-summary__row dd { overflow-wrap: anywhere; }

/* Average price chart: purchases blue, hypothetical additional purchase dashed green. */
.tlc-cr .tlc-cr-chart .tlc-chart__line--value { stroke: var(--tlc-primary); }
.tlc-cr .tlc-cr-chart .tlc-chart__end--value,
.tlc-cr .tlc-cr-chart .tlc-chart__dot--value { fill: var(--tlc-primary); }
.tlc-cr .tlc-cr-chart .tlc-chart__pill--value rect { fill: var(--tlc-primary); }
.tlc-cr .tlc-cr-chart .tlc-chart__line--contrib { stroke: #16a085; stroke-dasharray: 7 6; }
.tlc-cr .tlc-cr-chart .tlc-chart__end--contrib,
.tlc-cr .tlc-cr-chart .tlc-chart__dot--contrib { fill: #16a085; }
.tlc-cr .tlc-cr-chart .tlc-chart__pill--contrib rect { fill: #0e7c6b; }
.tlc-cr .tlc-cr-chart .tlc-chart__tooltip-row--value span::before { background: var(--tlc-primary); }
.tlc-cr .tlc-cr-chart .tlc-chart__tooltip-row--contrib span::before { background: #16a085; }
.tlc-cr .tlc-cr-legend--avg::before,
.tlc-cr .tlc-cr-legend--sim::before { width: 12px; height: 12px; border-radius: 50%; background: var(--tlc-primary); }
.tlc-cr .tlc-cr-legend--sim::before { background: #16a085; }

.tlc-cr .tlc-ir-tab svg { width: 22px; height: 22px; flex: none; }
.tlc-cr .tlc-cr-asset .tlc-mach-select { width: 100%; }

@container tlc-settings (max-width: 400px) {
	.tlc-cr .tlc-cr-asset { grid-template-columns: minmax(0, 1fr); }
}