/* Pagination
----------------------------------------*/
#pagination {
	--col: 1/-1;
}
html:not(:has(#text)) #pagination {
	padding-bottom: calc(var(--space-xl));
}
#pagination ul {
	justify-content: center;
	margin: 0 0 calc(var(--space-xxxl) - var(--space-sm)) !important;
	position: relative;
	padding: 0 var(--space-xxxl);
	gap: var(--space-sm);
}

#pagination .next, #pagination .prev {
	position: absolute;
}

#pagination .next {
	right: 0;
}

#pagination .prev {
	left: 0;
	--icon-transform: scaleX(-1);
}

#pagination .prev a:hover .icon {
	--icon-transform: scaleX(-1) translate(calc(var(--icon-size)/4), 0px);
}

#pagination [aria-current] {
	pointer-events: none;
}

@media (max-width: 767px) {
	#pagination li:not(.next, .prev) {
		display: none;
	}
}
@media (min-width: 1200px) {
	html:not(:has(#text)) #pagination {
		padding-bottom: calc(var(--space-xxl));
	}
}
/*----------------------------------------------------------------
  Filter
----------------------------------------------------------------*/
.chapter #hero h1 .for{
	display: block;
	color: var(--text-ii);
}

#filter {
	--col: 1/-1;
	align-items: center;
	min-height: var(--filter-height);
	--subHeading-weight: var(--fw-normal);
	--filter-height: 3rem;
	padding-block: var(--space);
}
#filter-title {
	grid-column: span var(--grid-cols);
	font-size: var(--fs-initial);
	margin: 0;
}

#filter summary {
	text-transform: uppercase;
	letter-spacing: .25px;
	width: 100%;
	justify-content: start;
	--outline-offset: calc(var(--outline-width)*-1);
	--btn-padding: calc(var(--space)*.75) var(--space-md);
	--btn-font-size: var(--fs-small);
	--icon-size: 1.5rem;
	--icon-margin: 0 calc(-.5*var(--icon-size)) 0 auto;
	--icon-transform: rotate(90deg);
	--btn-shadow: var(--shadow-i);
	--btn-radius: 0;
}

#filter summary .label {
	margin: 0;
	font-size: inherit;
	width: calc(100% - var(--icon-size) - var(--space-md));
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

#filter summary .label .mark {
	margin-inline-start: var(--space-xs);
}

#filter details .icon {
	transition: transform .16s cubic-bezier(.75, 0, .125, 1);
}

#filter details[open] .icon {
	--icon-transform: rotate(-90deg);
}

#filter details[open] > summary {
	z-index: 30;
}

#filter .curtain {
	position: fixed;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	background: transparent;
	z-index: -10;
}

/* Common styles for filter - details-menu and fieldset */
#filter fieldset, #filter details-menu {
	text-transform: lowercase;
	align-content: start;
	border: none;
	gap: var(--menu-gap);
	--menu-gap: calc(var(--space)*.75);
}
#filter > * {
	--col: var(--inner-col);
}

@media (min-width: 1200px) {
	#filter {
		--menu-gap: var(--space);
		--gap-x: var(--space-md);
		--filter-height: 5rem;
	}
	#filter > details:first-of-type {
		--col: var(--inner-col-start)/span 5;
		margin-inline-start: calc(-1*var(--gap-x)/2);
	}
	#filter > * {
		--col: span 5;
	}
}
/* */
#filter .tabs--chips, #filter .cloud {
	--col: var(--inner-col);
}

@media (min-width: 1200px) {
	#filter .cloud {
		--scroll-overflow: auto;
		--wrap: wrap;
	}
}

#filter a {
	font-weight: var(--fw-medium);
	letter-spacing: .25px;
	flex-wrap: nowrap;
	flex-shrink: 0;
	--btn-padding: var(--space-sm) var(--space);
	--btn-line: 1rem;
	--btn-font-size: var(--fs-small);
	--btn-shadow: inset 0px 0px 0px var(--border-width) var(--divider--subtle);
	--btn-hover-shadow: inset 0px 0px 0px var(--border-width) var(--divider--accent);
	--icon-size: 1rem;
	--btn-bg: transparent;
	--btn-hover-overlay: var(--hover-overlay--accent);
}

#filter a[aria-checked="true"] {
	--btn-shadow: inset 0px 0px 0px var(--border-width) var(--accent);
	--btn-hover-shadow: inset 0px 0px 0px var(--border-width) var(--accent);
	--btn-bg: rgba(var(--accent-rgb),.1);
	--btn-color: var(--accent);
	--btn-hover-color: var(--btn-color);
}

#filter details-menu {
	position: absolute;
	overflow: hidden;
	/*min-height: 13rem; */
	padding: var(--space-xl) var(--fluid-right) var(--space-xl) calc(var(--fluid-left) + var(--space-md));
	left: 0;
	right: 0;
	z-index: 99;
	font-weight: var(--fw-normal);
	box-shadow: var(--shadow-ii);
	background: var(--attention--a);
	width: 100%;
}

@media (max-width: 1119px) {
	#filter {
		--cols: 1;
		--gap-y: var(--space-xxs);
	}

	#filter details-menu {
		position: relative;
		padding: calc(var(--space-lg)) var(--fluid-right) calc(var(--space-lg)) calc(var(--fluid-left));
		box-shadow: none;
	}

	#filter details summary {
		--btn-padding: var(--space-sm) var(--space);
		--btn-shadow: none;
	}
}

@media (min-width: 1200px) {
	#filter details[open] ~ .curtain {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100vh;
		z-index: 20;
		background: var(--overlay);
	}
}
#filter a .headshot {
	width: 1.5rem;
	--ratio-percentage: 100%;
	border-radius: 50%;
	margin-block: calc(-1*(var(--space)*0.75));
	margin-inline: calc(-1*(var(--space)*0.75)) var(--space-sm);
	background: var(--attention--b);
	z-index: -1;
}

#filter a .headshot.--inactive {
	filter: url(#svg-filter--base);
	filter: url(/user/themes/letrado/img/sprite.symbol.svg#svg-filter--base);
}

#filter .clean {
	align-self: center;
	justify-self: right;
	margin: 0;
	--btn-color: var(--accent);
	--btn-hover-color: var(--accent);
	--btn-bg: transparent;
}

#filter .clean .icon {
	transition: transform .16s cubic-bezier(.75, 0, .125, 1);
	transform-origin: center center;
}

#filter .clean:hover {
	--icon-transform: rotate(-180deg);
}

@media (max-width: 1119px) {
	#filter .clean {
		justify-self: left;
		margin-top: var(--space-md);
	}
}

#filter + .selected {
	--col: var(--inner-col);
	display: flex;
	flex-wrap: wrap;
	padding-top: calc(var(--space-xl) + var(--space-xxxs) + var(--space-xs));
	padding-bottom: calc(var(--space) - var(--space-xxxs));
	align-items: center;
	--list-margin: 0;
	--btn-shadow: none;
	--btn-color: var(--accent);
	--btn-hover-color: var(--accent);
	--outline-offset: 0;
	--btn-padding: var(--space-sm) calc(var(--icon-size) + var(--space-sm)) var(--space-sm) var(--space);
	--btn-line: 1rem;
	--btn-font-size: var(--fs-smaller);
	--btn-bg: rgba(var(--accent-rgb),.1);
	--btn-hover-overlay: var(--hover-overlay--accent);
	--icon-size: 1.5rem;
}

@media (max-width: 1119px) {
	#filter + .selected {
		padding-bottom: calc(var(--space-sm) - var(--space-xxxs));
		padding-top: calc(var(--space-lg) + var(--space-xxxs) + var(--space-xs));
	}
}

#filter + .selected .icon {
	border-radius: var(--icon-size);
	position: absolute;
	right: var(--space-xs);
	top: 0;
	bottom: 0;
	--icon-margin: auto;
}

/* Filter has no results */
:not(:has(#filter + .selected ~ #list)) #filter + .selected {
	padding-bottom: calc(var(--space-xxl) - var(--space-xxxs));
}

#filter + .selected > span {
	margin-right: var(--space-sm);
}

#filter + .selected > ul + span {
	margin-right: var(--space-sm);
}

#filter + .selected ul {
	display: inline-flex;
	flex-wrap: wrap;
}

#filter + .selected ul li {
	display: inline-block;
	margin: var(--space-sm) var(--space-sm) var(--space-sm) 0;
	padding: var(--btn-padding);
	color: var(--btn-color);
	font-size: var(--btn-font-size);
	line-height: var(--btn-line);
}

#filter + .selected .clean {
	-webkit-text-decoration: underline var(--divider--accent);
	        text-decoration: underline var(--divider--accent);
	--btn-padding: var(--space-sm);
	--link-decoration: underline var(--divider--accent);
	--btn-radius: .25rem;
	--btn-bg: transparent;
}
:root {
	--help-cols: var(--inner-cols);
	--help-width: calc(var(--grid-unit)*var(--help-cols) - var(--gap-x));
}

#help {
	position: var(--help-position, relative);
	box-shadow: var(--shadow-i);
	padding-block: var(--grid-unit);
	border-radius: var(--inner-radius);
	--inner-radius: calc(var(--space)*.5);
	z-index: 10;
	background: var(--attention--a);
	min-height: auto;
	align-self: start;
	align-content: start;
	--headshot-size: calc(var(--grid-unit)*6 - var(--gap-x));
	width: var(--help-width, 100%);
	--profile-direction: row;
	--profile-info-padding: calc(var(--space)*.75) 0 var(--space-xxs);
	--profile-name-size: var(--fs-medium);
	--profile-name-margin-block: var(--space-xxxs);
	--profile-info-gap-y: 0;
	--in-game-size: calc(var(--grid-unit)*2.75 - var(--gap-x));
	--cols: var(--inner-cols);
}

#help .section-title {
	display: var(--section-title-display, none);
	--h2-margin: 0rem 0rem .75rem;
	--h2-size: var(--fs-smaller);
	--h2-line: 1.5rem;
	--h2-color: var(--text-ii);
}

#help > * {
	--col: 2/-2;
}

#help.--is-expanded-panel {
	position: fixed;
	top: var(--space-xxl);
	min-height: calc(100vh - var(--space-xxl));
	width: var(--help-width);
	z-index: 1010;
	--help-width: 100%;
	left: 0;
	top: 0;
	margin: 0;
	overflow: auto;
	height: 100%;
	border-radius: 0;
	--not-expanded-display: block;
}

#help.--is-expanded-panel > .hr {
	border-top: var(--border--base);
	height: 1px;
	width: 100%;
	margin-block: var(--space-md);
}

#help ~ .curtain {
	display: none;
}

#help.--is-expanded-panel ~ .curtain {
	display: block;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 20;
	background: var(--overlay);
	/*backdrop-filter: blur(10px); */
}

#help-form header {
	text-align: center;
	margin-bottom: var(--space-lg);
}

#help #help-form button {
	min-width: 100%;/*
	--btn-padding: var(--space-sm) var(--space-md);
	--btn-font-size: var(--fs-initial);*/
}

#help.--is-expanded-panel .form-wrapper form * {
	--col: 1/-1 ;
}

#help .form-header h3 {
	margin-block: calc(-1*var(--space-xs)) var(--space);
}
#help .form-header:has(p) h3 {
	margin-block: calc(-1*var(--space-xs)) var(--space-sm);
}
#help .form-columns.grid {
	--cols: 2;
	--gap-x: var(--space-xs);
}

#help .form-columns.grid * {
	grid-column: span 1;
}

#help .form-wrapper {
	display: var(--not-expanded-display, none);
}

#help .form-wrapper .notices {
	margin-bottom: var(--space-lg);
}

#help .notices.--i {
	--tile-color: var(--text-inverse-i);
}

#help .profile {
	--gap-x: .75rem;
	align-items: center;
	--profile-job-line: 1.5rem;
}

#help .profile .photo {
	max-width: var(--headshot-size);
	width: var(--headshot-size);
	border-radius: var(--inner-radius);
}

#help .profile .in-game {
	left: calc(var(--headshot-size) - var(--in-game-size)*3/4);
	right: auto;
	top: calc(-1*var(--in-game-size)/4);
}

#help .message {
	font-size: var(--fs-smaller);
	line-height: 1.5rem;
	transition: opacity .16s cubic-bezier(.75, 0, .125, 1) .08s;
	position: relative;
	/*background: var(--attention--b);
	padding: var(--space-sm) var(--space);
	border-radius: 1rem;
	border-top-left-radius: 0;*/
}

#help .btn, #help button {
	align-self: flex-start;
	margin-top: var(--space);
	min-width: var(--headshot-size);
	overflow: visible;
}

#help.--is-expanded-panel #help-form-toggle, #help.--is-expanded-panel .message.--active,
#help.--is-expanded-panel .profile .info > *:not(.in-game),
#help:not(.--is-expanded-panel) .form-wrapper .notices {
	display: var(--expanded-display, none);
}

#help.--is-expanded-panel .profile .in-game > .rotate {
	animation-play-state: paused;
}

body:has(#help.--is-expanded-panel) {
	overflow: hidden;
	--scroll-width: 0px !important;
}

button[data-close] {
	display: none;
}

#help.--is-expanded-panel button[data-close] {
	position: absolute;
	margin: 0;
	min-width: inherit;
	display: flex;
	right: 0rem;
	--btn-shadow: var(--shadow-i);
	--btn-hover-shadow: var(--shadow-i);
	top: 0rem;
	--row: 1/span 1;
	--col: 2/-2;
	--icon-size: 1.5rem;
	--icon-margin: 0;
	z-index: 1;
}
@media (min-width: 768px) {
	#help {
		--in-game-size: calc(var(--grid-unit)*2 - var(--gap-x));
		--profile-direction: column;
	}
	#help .profile {
		align-items: flex-start;
	}

	#help #help-form-toggle {
		--col: 2/calc(var(--cols)/2);
	}
	#help .message {--col: 2/calc(var(--cols)/4*3 );}
}
@media (min-width: 1200px) {
	:root {
		--help-cols: 9;
	}

	body#lawyer:has(#help.--is-expanded-panel) {
		overflow: auto;
	}

	#help {
		top: var(--space-xxxl);
		--cols: var(--help-cols);
		min-height: calc(100vh - var(--space-xxxl));
		padding-block: var(--space-xl) var(--space-xxl);
		--in-game-size: calc(var(--grid-unit)*1 - var(--gap-x));
		--inner-radius: 0px;
		position: sticky;
		overflow: hidden;
		--section-title-display: block;
		--expanded-display: block;
	}

	#help .section-title {
		--h2-size: var(--fs-initial);
		--h2-margin: var(--space-xs) 0 calc(var(--space) + var(--space-xs)) 0;
	}

	#help.--is-expanded-panel {
		--help-width: calc(100vw - var(--scroll-width) - var(--fluid-left));
		left: var(--fluid-left);
		top: var(--header-height);
		--cols: 22;
	}
	#help .profile, #help #typing, #help > button, #help #help-form-toggle, #help .section-title {
		--col: 2/6;
	}
	#help .message {
		--col: 2/7;
	}

	#help #help-form-toggle {
		margin-top: calc(var(--space-lg) + var(--space-xxs));
	}

	#help.--is-expanded-panel .form-wrapper {
		--col: 10/calc(var(--cols) - var(--offset-cols-end)*2);
		--col: 8/calc(var(--cols) + 1);
		--row: 1/10;
		padding-block: var(--space-sm) var(--space-xxxl);
		--h3-margin: 0 0 var(--space-md) 0;
		overflow: auto;
		scrollbar-width: thin;
		margin-right: calc(-1*var(--space-sm));
	}

	#help.--is-expanded-panel .form-wrapper form {
		--col: 2/calc(var(--cols) - var(--offset-cols-end)*2) !important;
		--row: span 1;
		--cols: 15;
	}

	#help.--is-expanded-panel .form-wrapper form * {
		--col: 3/12 !important;
	}

	#help .form-columns.grid {
		--gap-x: var(--space);
	}

	#help .form-header h3 {
		font-size: var(--h2-size);
		line-height: var(--h2-line);
	}

	#help.--is-expanded-panel > .hr {
		--col: 8/9;
		border-left: var(--border--base);
		height: 100%;
		width:1px;
		--row: 1/10;
		margin: 0;
	}


	.form-wrapper .notices {
		max-width: calc(var(--grid-unit)*9);
		margin-left: calc(var(--grid-unit)*2);
	}

}
/* Hole puncher
----------------------------------------
.puncher {
	display: none;
	--puncher-hole-size: var(--space);
	--puncher-hole-size: calc(var(--space)*1.25);
	--col: 1/span 1;
}

@media (min-width: 1200px) {
	.puncher {
		display: block;
		position: absolute;
		width: var(--grid-unit);
		height: 100%;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.puncher .hole {
		position: absolute;
		width: var(--puncher-hole-size);
		height: var(--puncher-hole-size);
		background: var(--bg);
		border-radius: calc(var(--puncher-hole-size)/2);
		left: 0;
		right: 0;
		margin: auto;
		box-shadow: inset 1px 2px 4px rgba(var(--base-rgb),.16);
	}

}
@media (min-width: 1200px){
	#help .puncher .hole { top: calc(var(--space-xxl) - var(--puncher-hole-size));}
	#help .puncher .hole + .hole { top: 0; bottom: 0; margin: auto;}
	#help .puncher .hole + .hole +.hole { top: auto; bottom: calc(var(--space-xxl) - var(--puncher-hole-size));}
}
*/

/* Typing animation for lawyer message
----------------------------------------*/
.js #help .message {
	height: 0;
	opacity: 0;
	padding: 0;
	margin: 0;
}

.no\:js #help .message, .js #help .message.--active {
	height: auto;
	opacity: 1;
	margin-block: calc(var(--space) - var(--space-xxs)) 0;
}

#typing.--active {
	opacity: 1;
	height: 16px;
	margin: 0 0 var(--space-lg);
	margin: 0 0 var(--space);
}

#typing {
	display: flex;
	justify-content: center;
	--items: center;
	position: relative;
	top: var(--space);
	background: rgba(var(--accent-rgb),.24);
	width: 48px;
	height: 0;
	opacity: 0;
	font-size: 0;
	border-radius: 8px;
	transition: opacity .24s ease-in-out;
}

#typing .dot {
	position: absolute;
	top: 6px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--text-i);
	animation: loader-wave 1.5s infinite;
	animation-delay: 0s;
}

#typing .dot {
	left: 16px;
	animation-delay: 200ms;
}

#typing .dot+.dot {
	left: 22px;
	animation-delay: 400ms;
}

#typing .dot+.dot+.dot {
	left: 28px;
	animation-delay: 600ms;
}

@keyframes loader-wave {
	0% {
		transform:translateY(0)
	}
	20% {
		transform:translateY(-2px)
	}
	40% {
		transform:translateY(0)
	}
	100% {
		transform:translateY(0)
	}
}
/*----------------------------------------------------------------
  Import blocks
----------------------------------------------------------------*/
/*----------------------------------------------------------------
  Cases
----------------------------------------------------------------*/
:root {
	--overview-height: 4rem;
}
#hero p {
	color: var(--text-ii);
}
/* No pagination + no pagination, no text */
#cases:has(#text ~ #list):not(:has(#list + footer)) #list {
	padding-bottom: var(--space-xxxl);
}

#cases:not(:has(#text ~ #list)):not(:has(#list + footer)) #list {
	padding-bottom: calc(var(--space-xxxl) + var(--space-md));
}

#content :is(#list, #text, footer) {
	--col: var(--inner-col);
}

#cases .case-list {
	padding-block: var(--space-xl);
	--tile-ratio: 3/2 auto;
	--tile-hover-shadow: var(--shadow-i);
	--gap-x: var(--space-sm);
	--gap-y: var(--space-sm);
	--col: 1/-1;
}

#cases .case-list > * {
	--col: span var(--inner-cols); 
	--gap-y: 0;
}

.case-list .tile .footer {
	margin-top: auto;
}
@media (min-width: 768px) {
	#cases .case-list {
		--tile-ratio: 21/9 auto;
	}
}
@media (min-width: 1200px) {
	#cases .case-list {
		padding-block: var(--space-xxl);
		--gap-x: var(--space-md);
		--gap-y: var(--space-md);
	}
	#cases .case-list > * {
		--col: span calc(var(--inner-cols)/2);
	}

}

/* Form
--------------------------------*/
#help:not(.--is-expanded-panel) {
	display: none;
}

@media (min-width: 1200px) {
	
	#help.--is-expanded-panel {
		--help-width: calc(100vw/2 - var(--scroll-width));
		left: auto; right: 0;
		top: 0;
		--cols: 12; padding-block: var(--space-xl) 0;
	}

	#help.--is-expanded-panel .form-wrapper {
		--col: 1/-1; margin-right: 0;
	}

	#help.--is-expanded-panel .form-wrapper form {
		--cols: 12;
	}
	#help.--is-expanded-panel .form-wrapper form * {
		--col: 2/11 !important;
	}

}