/*
------------------------------------------------
Owner Response Options
------------------------------------------------
*/

.tl-owner-response-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}


.tl-owner-response-option {
	flex: 0 0 auto;
	white-space: nowrap;
}



/*
------------------------------------------------
Empty Owner Response
------------------------------------------------
*/

.tl-owner-response-area:empty,
.tl-entry-owner-activity:empty {
	display: none;
}


/*
------------------------------------------------
Training Timelines
------------------------------------------------
*/

.tl-owner-training-timeline,
.tl-training-timeline {
	display: flex;
	flex-direction: column;
	gap: 16px;

	width: 100%;
}


/*
------------------------------------------------
Training Entry Cards
------------------------------------------------
*/

.tl-owner-training-entry,
.tl-training-entry {
	width: 100%;
	max-width: none;

	margin: 0 auto;
	padding: 16px;

	box-sizing: border-box;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border-soft);
	border-radius: var(--tl-radius);

	box-shadow:
		0 1px 2px rgba(0, 0, 0, .04),
		0 4px 12px rgba(0, 0, 0, .06);
}


/*
------------------------------------------------
Entry Contributor
------------------------------------------------
*/

.tl-owner-training-entry .tl-entry-contributor,
.tl-training-entry .tl-entry-contributor {
	display: flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 18px;
}


.tl-owner-training-entry .tl-entry-trainer-photo,
.tl-training-entry .tl-entry-trainer-photo {
	flex: 0 0 46px;
}


.tl-owner-training-entry .tl-entry-trainer-photo img,
.tl-training-entry .tl-entry-trainer-photo img {
	display: block;

	width: 46px;
	height: 46px;

	object-fit: cover;
	border-radius: 50%;
}


.tl-owner-training-entry .tl-entry-contributor-details,
.tl-training-entry .tl-entry-contributor-details {
	flex: 1 1 auto;
	min-width: 0;
}


.tl-owner-training-entry .tl-entry-trainer-name,
.tl-training-entry .tl-entry-trainer-name {
	display: block;

	color: var(--tl-color-text);

	font-size: .9375em;
	font-weight: 700;
	line-height: 1.3;
}


.tl-owner-training-entry .tl-entry-date,
.tl-training-entry .tl-entry-date {
	display: block;
	margin-top: 2px;

	color: var(--tl-color-text-secondary);

	font-size: .8125em;
	line-height: 1.3;
}


/*
------------------------------------------------
Entry Text
------------------------------------------------
*/

.tl-owner-training-entry .tl-entry-update,
.tl-training-entry .tl-entry-update {
	margin: 0;

	color: var(--tl-color-text);

	font-size: 1em;
	line-height: 1.55;
}


.tl-owner-training-entry .tl-entry-update p,
.tl-training-entry .tl-entry-update p {
	margin: .875em 0;
}


.tl-owner-training-entry .tl-entry-update > :first-child,
.tl-training-entry .tl-entry-update > :first-child {
	margin-top: 0;
}


.tl-owner-training-entry .tl-entry-update > :last-child,
.tl-training-entry .tl-entry-update > :last-child {
	margin-bottom: 0;
}


/*
------------------------------------------------
Owner Response Areas
------------------------------------------------
*/

.tl-owner-training-entry .tl-owner-response-area,
.tl-training-entry .tl-entry-owner-activity {
	margin-top: 20px;
	padding-top: 18px;

	border-top: 1px solid var(--tl-color-border-soft);

	font-size: .875em;
}


.tl-owner-response-selected {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}


.tl-entry-owner-activity .tl-owner-response-selected {
	margin-bottom: 10px;
}


.tl-entry-owner-activity .tl-owner-response-selected:last-child {
	margin-bottom: 0;
}


.tl-owner-response-owner {
	color: var(--tl-color-text-secondary);
	font-size: 1em;
}


/*
------------------------------------------------
Owner Response Pills
------------------------------------------------
*/

.tl-owner-response {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 8px 14px;

	border: 1px solid transparent;
	border-radius: 999px;

	font: inherit;
	font-weight: 600;
	line-height: 1.2;

	white-space: nowrap;
}


/*
------------------------------------------------
Clickable Response Pills
------------------------------------------------
*/

button.tl-owner-response {
	cursor: pointer;

	-webkit-appearance: none;
	appearance: none;

	transition:
		transform .12s ease,
		box-shadow .12s ease;
}


button.tl-owner-response:hover {
	transform: translateY(-1px);

	box-shadow: 0 2px 5px rgba(0, 0, 0, .10);
}


button.tl-owner-response:active {
	transform: translateY(0);

	box-shadow: none;
}


button.tl-owner-response:focus-visible {
	outline: 2px solid var(--tl-color-primary);
	outline-offset: 2px;
}


/*
------------------------------------------------
Reaction Colors
Muted Field Palette
------------------------------------------------
*/

.tl-owner-response.tl-owner-response--exciting {
	background: #eee5cf;
	border-color: #d5c49b;
	color: #67572f;
}


.tl-owner-response.tl-owner-response--thank_you {
	background: #e8e3dc;
	border-color: #d0c7bb;
	color: #62594e;
}


.tl-owner-response.tl-owner-response--great_update {
	background: #dfe7e9;
	border-color: #c4d1d5;
	color: #405d66;
}


.tl-owner-response.tl-owner-response--understood {
	background: #e5e7e8;
	border-color: #cdd1d3;
	color: #50575b;
}


.tl-owner-response.tl-owner-response--good_to_know {
	background: #e0e7df;
	border-color: #c4d0c2;
	color: #49604a;
}


.tl-owner-response.tl-owner-response--trust_the_process {
	background: #e2e3df;
	border-color: #c9cbc4;
	color: #55594f;
}


/*
------------------------------------------------
Trainer Entry Metadata
------------------------------------------------
*/

.tl-training-entry .tl-entry-meta {
	margin-top: 18px;

	color: var(--tl-color-text-secondary);

	font-size: .8125em;
	line-height: 1.4;
}


/*
------------------------------------------------
Trainer Entry Actions
------------------------------------------------
*/

.tl-training-entry > p:last-child {
	margin: 14px 0 0;
}


.tl-app .tl-training-entry > p:last-child a.button,
.tl-app .tl-training-entry > p:last-child a.button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 34px;
	padding: 6px 11px;

	box-sizing: border-box;

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

	color: var(--tl-color-text-secondary);

	font-size: .8125em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}


.tl-app .tl-training-entry > p:last-child a.button:hover,
.tl-app .tl-training-entry > p:last-child a.button:focus {
	background: var(--tl-color-border-soft);
	border-color: var(--tl-color-border);

	color: var(--tl-color-text);
}




/*
------------------------------------------------
Training Update Forms
------------------------------------------------
*/

.tl-session-entry-form,
.tl-session-entry-edit-form {
	width: 100%;
}

.tl-session-entry-form .tl-list-header,
.tl-session-entry-edit-form .tl-list-header {
	margin-bottom: 16px;
}

.tl-session-entry-form .tl-form,
.tl-session-entry-edit-form .tl-form {
	gap: 18px;
}

.tl-session-entry-form textarea,
.tl-session-entry-edit-form textarea {
	min-height: 170px;
}


/*
------------------------------------------------
Training Update Context
------------------------------------------------
*/

.tl-session-entry-context {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;

	margin: -2px 0 0;

	color: var(--tl-color-text-secondary);

	font-size: .875em;
	line-height: 1.4;
}

.tl-session-entry-context-item {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
}

.tl-session-entry-context-label {
	color: var(--tl-color-text-secondary);

	font-weight: 700;
}

.tl-session-entry-context-value {
	color: var(--tl-color-text);
	font-weight: 600;
}

.tl-session-entry-context-separator {
	color: var(--tl-color-border);
}


/*
------------------------------------------------
Training Update Photo Section
------------------------------------------------
*/

.tl-session-entry-form .tl-entry-image-editor,
.tl-session-entry-edit-form .tl-entry-image-editor {
	display: grid;
	gap: 10px;
}

.tl-session-entry-form .tl-entry-image-editor h3,
.tl-session-entry-edit-form .tl-entry-image-editor h3 {
	margin: 0;

	font-size: 1em;
	line-height: 1.3;
}

.tl-session-entry-form .tl-photo-upload,
.tl-session-entry-edit-form .tl-photo-upload {
	display: grid;
	justify-items: start;
	gap: 2px;
}


/*
------------------------------------------------
Owner Revision Notification
------------------------------------------------
*/

.tl-revision-notification {
	display: grid;
	gap: 12px;

	margin: 0;
	padding: 14px 16px;

	background: rgba(251, 250, 246, .45);
	border: 1px solid var(--tl-color-border-soft);
	border-radius: var(--tl-radius);
}

.tl-revision-notification-header {
	display: grid;
	gap: 3px;
}

.tl-revision-notification legend {
	margin: 0;
	padding: 0;

	color: var(--tl-color-text);

	font-size: .875em;
	font-weight: 700;
	line-height: 1.35;
}

.tl-revision-notification-header p,
.tl-revision-notification-help {
	margin: 0;

	color: var(--tl-color-text-secondary);

	font-size: .8125em;
	line-height: 1.45;
}

.tl-revision-notification-option span {
	min-height: 38px;
	padding: 7px 12px;

	background: var(--tl-color-surface);

	font-size: .8125em;
}

.tl-revision-notification-help {
	padding-top: 2px;
}


/*
------------------------------------------------
Training Update Actions
------------------------------------------------
*/

.tl-session-entry-form .tl-form-actions,
.tl-session-entry-edit-form .tl-form-actions {
	margin-top: 0;
}

.tl-session-entry-form .tl-form-actions > a,
.tl-session-entry-edit-form .tl-form-actions > a {
	font-size: .875em;
	font-weight: 600;
	text-decoration: none;
}


/*
------------------------------------------------
Larger Screens
------------------------------------------------
*/

@media (min-width: 768px) {

	.tl-owner-training-timeline,
	.tl-training-timeline {
		gap: 18px;
	}


	.tl-owner-training-entry,
	.tl-training-entry {
		padding: 22px 24px;
	}


	.tl-owner-training-entry .tl-entry-contributor,
	.tl-training-entry .tl-entry-contributor {
		gap: 12px;
	}


	.tl-owner-training-entry .tl-entry-trainer-photo,
	.tl-training-entry .tl-entry-trainer-photo {
		flex-basis: 50px;
	}


	.tl-owner-training-entry .tl-entry-trainer-photo img,
	.tl-training-entry .tl-entry-trainer-photo img {
		width: 50px;
		height: 50px;
	}

}