/* © up2date/dnada */
:root {
	--z-input: 1;
	--z-info: 2;
	--z-glass: 3;
	--z-front: 4;
	--font: Geneva;
	--large: 100em;
	--floor: 6px;
	--label: 7em;
	--space: 4px;
	--photo: 50px;
	--panelm: 1em;
	--panelp: 3ex var(--panelm);
	--panelr: 20pt;
	--buttong: 10pt;
	--careb: #f66;
	--carec: #eee;
	--lookb: #66f;
	--lookc: #eee;
}
body.standard {
	--border: #888;
	--inkc: #000;
	--inkd: #555;
	--card: none;
	--actionc: #103020;
	--hoverb: #bcf;
	--hoverc: #000;
	--selectb: #bcf;
	--selectc: #000;
	--pinc: #888;
	--pins: none;
	--strangerb: #2c2c2b;
	--strangerc: #eee;
	--thingb: #ececec;
	--thingc: #222;
	--back: var(--thingb);
	--color: var(--thingc);
	--backh: linear-gradient(0deg, #8880, var(--back) 90%, var(--back));
	--summaryb: #e6e6e6;
	--summaryc: var(--inkd);
	--summaryd: 1px solid var(--border);
	--summarys: var(--summaryb);
	--even: #f0f0f0;
	--panelb: #e6e6e6;
	--paneld: 1px solid var(--border);
	--panels: none;
	--panelm: none;
	--panelw: 4px 4px 8px 1px hsl(25 5% 66%);
	--panelt: 10px 10px 0 0;
	--popupb: var(--panelb);
	--plume-dateb: var(--popupb) ! important;
	--plume-datec: var(--color) ! important;
	--plume-dates: var(--popups) ! important;
	--popups: #58fc;
	--frontb: none;
	--tool: #e0e0e0;
	--bringb: #fff;
	--bringc: #000;
	--error: red;
	
	--titleb: #c0c0c0;
	--titlec: var(--inkd);
	--arrow: var(--inkd);
	
	--submitb: hsl(130deg 93% 34%);
	--buttonb: silver;
	--buttonc: var(--color);
	--buttond: 2px outset #aaa8;
	--buttonf: var(--font);
	--buttons: 3pt 3pt 4pt #999;
	--inputb: none;
	--outputb: none;
	--outputc: #888;
	--inputd: 1px inset #fff;
	--inputh: var(--inkd);
	--inputp: 1px 4px;
	--inputps: 0;
	--inputr: 0;
	--inputs: none;
	--outputs: none;
	--inputw: #fbb;
	--inputk: hsl(120deg 20% 50%);
	--inputt: none;
	--strongc: #000;
	--taba: 0;
	--tabb: none;
	--taboffb: #d6d6d6;
	--taboffc: #777;
	--tabonb: var(--panelb);
	--tabonc: var(--color);
	--tabd: 1px solid #999;
	--tabp: 0 .3em;
	--tabr: 4pt 4pt 0 0;
	--tabs: none;
	--tabt: -27px;
}
@media screen and (prefers-color-scheme: dark) {
body.standard {
	--back: var(--strangerb);
	--color: var(--strangerc);
	--summaryb: #555;
	--even: #444;
	--panelb: #555;
	--panelw: 2px 2px 4px 0px hsl(25 5% 66%);
	--popups: #ef8c;
	--inkc: #fff;
	--inkd: #bbb;
	--actionc: #66cc99;
	--tool: #333;
	--bringb: #000;
	--bringc: #ffff;
	--error: #f99;
	--titleb: #333;
	--titlec: #222;
	--titlec: var(--inkd);
	--pinc: #bbb;
	--pins: 2pt 1pt 1pt #000;
	--buttonb: #999;
	--buttons: 3pt 3pt 4pt #444;
	--strongc: #fff;
	--inputd: 1px inset #767676;
	--inputw: #d55;
	--inputk: hsl(120deg 20% 50%);
	--taboffb: #444;
	--taboffc: #aaa;
	--tabd: 1px solid #888;
	--tabo: 1;
}
}
body.modern {
	--back: radial-gradient(circle at 40%, hsl(25deg 5% 70%), hsl(25deg 6% 50%));
	--color: hsl(0deg 13% 90%);
	--backh: linear-gradient(0deg, #8884, hsl(25deg 5% 70%) 90%, hsl(25deg 6% 50%));
	--card: radial-gradient(circle at 50% 10%, hsl(25 5% 80%), hsl(25deg 6% 40%));
	--strangerb: #2c2c2b;
	--strangerc: #eee;
	--summaryb: linear-gradient(40deg, hsl(25 6% 60%), #ddd, 75%, hsl(25 5% 60%));
	--summaryc: #222;
	--summaryc: var(--inkd);
	--summaryd: none;
	--summarys: none;
	--panelb: radial-gradient(circle at 60% 10%, hsl(25 5% 65%), hsl(25deg 6% 46%));
	--paneld: 1px solid #fff;
	--panels: inset 1pt 1pt 4pt #fffb, 4pt 4pt 8pt #0005;
	--panelm: inset 1pt 1pt 4pt #fffb, 6pt 6pt 10pt #0007;
	--panelw: 2px 2px 4px 0px hsl(25 5% 20%);
	--panelt: 10px 10px 0 0;
	--even: var(--panelb);
	--popupa: hsl(25deg 6% 46%);
	--popupb: radial-gradient(circle at 60% 10%, hsl(25 5% 65% / .67), hsl(25deg 6% 46% / .9));
	--popups: #ef8c;
	--frontb: linear-gradient(0.4turn, hsl(32deg 6% 63%) 20%, hsl(32deg 6% 50%) 70%, hsl(32deg 6% 30%));
	--tool: hsl(25 5% 50%);
	--bringb: var(--frontb);
	--bringc: white;
	--error: #fee;
	--pinc: var(--buttonc);
	--pins: 2pt 1pt 1pt #0008;
	--border: #888;
	--titleb: hsl(25deg 5% 80%);
	--titlec: #222;
	--titlec: var(--inkd);
	--arrow: #586868;
	--inkc: hsl(60deg 3% 90%);
	--inkd: hsl(60deg 3% 30%);
	--actionc: #103020;
	--hoverb: hsl(180deg 100% 50%);
	--hoverc: #444;
	--selectb: hsl(180deg 80% 60%);
	--selectc: #444;
	
	--submitb: hsl(130deg 93% 30%);
	--buttonb: hsl(17deg 4% 60%);
	--buttonc: hsl(145deg 67% 80%);
	--buttonb: hsl(180deg 100% 30%);
	--buttonc: #eee;
	--buttond: none;
	--buttonf: var(--font);
	--buttons: inset -1px -1px 11px #4448, 3pt 3pt 4pt #0008;
	--inputb: hsl(0deg 4% 50%) !important;
	--outputb: hsl(0deg 4% 53% / 70%);
	--outputc: hsl(0deg 4% 50% / 70%);
	--inputd: none;
	--inputh: hsl(60deg 3% 75%);
	--inputp: 2px 8px 4px 6px;
	--inputps: 2px;
	--inputr: 8pt;
	--inputs: inset 1pt 1pt 4pt #0005, inset -1pt -1pt 3pt #fffb;
	--outputs: inset -1px -1px 0px #0005, inset 1px 1px 1px #fffb;
	--inputw: #e77;
	--inputk: hsl(120deg 20% 50%);
	--inputt: 1px 1px #444;
	--strongc: #fff;
	--taba: 12pt;
	--tabb: var(--titleb);
	--taboffb: transparent;
	--taboffc: #222;
	--tabonb: linear-gradient(174deg, #3338 1px,#8880, #fff);
	--tabonc: #000;
	--tabd: none;
	--tabo: .5;
	--tabp: 2pt;
	--tabr: 10pt;
	--tabs: 4px 4px 6px #0006, inset 1px 1px 2px #fff, inset -1px -1px 2px #777;
	--tabt: -1em;
}

::-webkit-scrollbar {
    display: none;
}
body.resize {
	cursor: ns-resize;
	user-select: none;
}
html, body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

button {
	position: relative;
	border-radius: 16pt;
	margin-top: 4pt;
	background: var(--buttonb);
	color: var(--buttonc);
	border: var(--buttond);
	box-shadow: var(--buttons);
	font: var(--buttonf);
	font-size: var(--buttong);
	letter-spacing: 1pt;
	padding: 0 .5em 1px;
	text-shadow: 1pt 1pt 1pt #888;

}
body.modern button::before {
	content: "";
	position: absolute;
	top: 1%;
	left: 4%;
	height: 40%;
	width: 92%;
	background-image: linear-gradient(#fffd, #fff0);
	border-radius: 16pt;
}
button[type=submit],
button.yes {
	background-color: var(--submitb);
}
button:active:enabled {
	box-shadow: none;
	transform: translate(2pt, 2pt);
}
button:disabled {
	filter: contrast(0.5);
}
button:hover:enabled,
button:focus-visible:enabled {
	filter: brightness(1.1);
	outline: none;
}
button.care {
	background-color: var(--careb);
	color: var(--carec);
}


body.modern input:-webkit-autofill,
body.modern input:-webkit-autofill:focus {
	transition: background-color 0s 600000s, color 0s 600000s !important;
}
input,
textarea,
select {
	border: var(--inputd);
	border-radius: var(--inputr);
	padding: var(--inputp);
	background: var(--inputb);
	color: var(--inkc) !important;
	text-shadow: var(--inputt);
	box-shadow: var(--inputs);
	font-family: sans-serif;
}
select {
	padding-left: var(--inputps);
}
input::placeholder {
	color: var(--inputh);
	text-shadow: none;
}
body.modern input:focus-visible,
body.modern select:focus-visible,
dialog:focus-visible {
	outline: none;
}
input[type=euro] {
	text-align: right;
	padding-right: calc(1.4em);
	width: 100%;
	box-sizing: border-box;
}
input[type=right],
input[type=siret] {
	text-align: right;
}
input[name=username] {
	display: none;
}
a.disabled {
	pointer-events: none;
	cursor: not-allowed;
}

form dfn {
	position: absolute;
	font-style: normal;
	cursor: default;
}
form dfn::after {
	content: '⚠️';
	font-size: 1.2rem;
	font-style: normal;
	cursor: help;
}
input:invalid,
form dfn div,
form dfn + input {
	background: var(--inputw);
}
form dfn.auto div,
form dfn.auto + input {
	background: var(--inputk);
}
form dfn div {
	position: absolute;
	bottom: 2.5ex;
	border-radius: 2ex;
	border: 4px double red;
	padding: 1ex 1em;
	white-space: pre;
	color: var(--inkc);
	text-align: left;
}
form dfn samp {
	display: inline-block;
	transform: rotate(90deg) scale(1.5) translate(-5px, -10px);
	text-shadow: 4px -4px 4px #0008;
	cursor: copy;
}

output {
	border-radius: var(--inputr);
	background: var(--outputb);
	color: var(--inkc) !important;
/* 	text-shadow: var(--inputt); */
	box-shadow: var(--outputs);
	text-align: right;
	font-family: sans-serif;
	display: block;
	line-height: 18px;
	padding: 0 6px 2px;
}

a:any-link {
	text-decoration: none;
	color: var(--color);
}

strong {
	color: var(--strongc);
}

ol, ul {
	padding: 0;
	margin: 0;
}
li {
	list-style-type: none;
}

body {
	font: var(--font);
	font-size: 12px;
	margin: 0;
	background: var(--back);
}

body > header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--backh);
	z-index: var(--z-front);
}

body > header picture img {
	height: 4em;
	left: 4px;
	position: fixed;
	top: 0;
}


details {
	position: relative;
	margin: 50px 0;
	border: 1px solid var(--border);
	border-radius: var(--panelr);
	background: var(--panelb);
	color: var(--color);
}
details > div {
	overflow-y: auto;
}
details[open] {
	padding: var(--panelp);
}
summary {
	display: flex;
	align-items: baseline;
	position: absolute;
	top: calc(-1lh - 7px);
	left: var(--panelr);
	border-radius: var(--panelt);
	padding: 3px 6px;
	background: var(--summaryb);
	color: var(--summaryc);
	border: var(--summaryd);
	border-bottom-color: var(--summarys);
}
summary:has(>[clyp-selector]) {
	padding-top: 1px;
	padding-bottom: 1px;
}
details[open] summary {
	cursor: zoom-out;
}
details:not([open]) {
	box-shadow: var(--panelw);
	cursor: zoom-in;
}

nav:has(>[clyp-selector]) {
	display: flex;
	justify-content: center;
	user-select: none;
}

[clyp-selector] {
	display: flex;
	align-items: center;
	border-radius: var(--taba);
	padding: var(--tabp);
	margin-bottom: 4px;
	background: var(--tabb);
	box-shadow: var(--tabs);
	user-select: none;
}

summary [clyp-selector] {
    padding-top: 0;
    padding-bottom: 0;
	margin: 0 0.2em 0 0.4em;
	background: none;
}

[clyp-selector] > * {
	padding: 1px 6px;
	border: var(--tabd);
	border-radius: var(--tabr);
	text-overflow: ellipsis;
	white-space: nowrap;
	background: var(--taboffb);
	color: var(--taboffc);
	filter: drop-shadow(2px 4px 6px #888);
	cursor: pointer;
}

body > header [clyp-selector] > *:has(img) {
	position: relative;
	padding-left: 32px ! important;
}
[clyp-selector] > *[selected] {
	border-bottom-color: transparent;
	background: var(--tabonb);
	color: var(--tabonc);
}
[clyp-selector] > *:hover {
	filter: drop-shadow(6px 5px 3px #555) brightness(1.3);
	transition-duration: .2s;
	transform: matrix(1.08, 0, 0, 1.08, -2, -2);
}
[clyp-selector].disabled > *,
[clyp-selector] > *.disabled {
	filter: none;
	transform: none;
	opacity: .4;
	cursor: default;
}
[clyp-selector] > *[selected]:hover {
	transform: none;
}

body > header nav:has(>[clyp-selector]) {
	border-bottom: var(--tabd);
}
body > header [clyp-selector] {
	position: relative;
	bottom: -1px;
	margin: 8px 0 0 0;
}
body > header [clyp-selector] img {
	position: absolute;
	bottom: 2px;
	left: 6px;
	width: 22px;
}
body > header [clyp-selector] > * {
	padding: 4px 8px;
}
body > header [clyp-selector] > *:first-child img {
	bottom: -1ch;
}

summary > span {
	margin: 0 0.6em 0 0.3em;
}
summary > span:after {
	content: "⌵";
	position: relative;
	top: -0.4ex;
	right: -4px;
}
details[name=report] summary > button {
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--arrow);
}
summary > button::before {
	display: none;
}

nav:has(nav) {
	position: absolute;
	right: var(--panelr);
	display: flex;
}
nav:has(nav):first-child {
	top: -1.6ex;
}
nav:has(nav):last-child {
	bottom: -2ex;
}
body > header nav:has(nav):last-child {
	right: 0;
	bottom: -1.9ex;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding: 0 var(--panelr);
	box-sizing: border-box;
}

nav:has(> label) {
	border: 1px solid var(--border);
	border-radius: 1em;
	margin-left: 4px;
	background: var(--tool);
	padding: 0px 6px 0px 2px;
}
nav:has(> button) {
	border: 1px solid var(--border);
	border-radius: 1em;
	margin-left: 4px;
	background: var(--tool);
	padding: 0 4px 1px 0;
}
nav button {
	position: relative;
	top: -2px;
	margin-left: .5em;
}
nav button:active:enabled {
	transform: translate(1pt, 1pt);
}
nav > label {
	vertical-align: middle;
}
nav > label:not(> input) {
	padding-left: .5em;
}
nav > span {
	padding-left: .5em;
}
nav:has(> samp) {
	border: 1px solid transparent;
	border-radius: 1em;
	margin-left: 4px;
	padding: 0px 6px 0px 2px;
}
nav:has(> samp):hover {
	border-color: var(--border);
	background: var(--tool);
}
nav > samp {
	font-family: inherit;
	vertical-align: middle;
	cursor: pointer;
}
nav > samp span {
	padding: .5em;
}


body > main {
	position: relative;
	margin: 7lh auto 0;
	max-width: 1400pt;
	padding: 0 2em 100ex;
}

label[visibility] {
	position: relative;
	top: -0.2ex;
	font-size: small;
}
label[visibility] input {
	margin: 2px 4px 0 10px;
}

details ul {
	overflow-x: hidden;
}
details.notify li {
	padding: 3px 0 3px 14px;
	filter: opacity(0.4);
	border-radius: 1em;
}
details.notify li::before {
	content: '⚠️';
	margin-right: .5em;
}
details.notify li.new {
	filter: none;
	cursor: pointer;
}
details.notify li.new:hover {
	background: var(--hoverb);
	color: var(--hoverc);
}
details.notify time {
	margin-right: 4px;
	border-radius: 12px;
	padding: 2px 6px;
	background: var(--bringb);
	color: var(--bringc);
}

main.much details.identity div form {
	opacity: 0;
}
details.identity form > ul {
	display: grid;
	row-gap: var(--floor);
	margin: 0 auto;
	padding-right: 1px;
	min-width: 40em;
	max-width: var(--large);
}

details.identity form > ul.visu {
	grid-template: 1fr repeat(5, 3ex) / 1.5fr 1fr;
}
details.identity form > ul label {
	display: grid;
	grid-template-columns: var(--label) 1fr;
	align-items: baseline;
	text-align: right;
}
details.identity form > ul label:has(>a) {
	grid-template-columns: var(--label) 1fr 1.4em;
}
details.identity form > ul span {
	text-align: right;
	padding: 0 var(--space) 0 1em;
}
details.identity form > ul span:first-child {
	padding-left: 0
}

details.identity li {
	align-items: center;
}
details.identity li.photo {
	grid-column: 1 / 3;
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	overflow-x: auto;
}
details.identity li.photo label {
	display: block;
	border-radius: 4px;
	padding: 2px 2px 2px .5em;
}
details.identity li.photo label:nth-child(4n+3) {
	background: var(--thingb);
	color: var(--thingc);
}
details.identity li.photo label:nth-child(4n+4) {
display: none;
	background: var(--strangerb);
	color: var(--strangerc);
}
details.identity form > ul:not(.visu) li.photo label:hover {
	filter: drop-shadow(2px 4px 6px #000);pointer
	cursor: pointer;
}
details.identity li.photo figure {
	display: flex;
	align-items: center;
	margin: 0;
}
details.identity form > ul:not(.visu) li.photo figure:hover {
	filter: brightness(1.3);
}
details.identity li.photo figcaption {
	text-align: center;
	padding-right: var(--space);
}
details.identity li.photo img {
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 2px;
	height: var(--photo);
}
details.identity li.photo input {
	display: none;
}

details.identity li.authentification {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
}
details.identity li.authentification button {
	border: none;
	margin: 0 1em;
	padding: 0;
	background: none;
	color: var(--color);
	box-shadow: none;
	text-shadow: none;
}
details.identity li.authentification button::before {
	display: none;
}
details.identity li.authentification button:hover {
	filter: drop-shadow(2px 4px 6px black);
}
details.identity li.password label {
	display: block;
	text-align: right;
	padding-right: var(--space);
}
details.identity li.half label {
	display: inline-grid;
	grid-template-columns: var(--label) 25ch;
}
details.identity li.division {
	display: grid;
	grid-template-columns: var(--label) 10em 1fr;
}
details.identity li.city {
	display: grid;
	grid-template-columns: var(--label) 10ch auto 1fr;
}
details.identity label.entry input {
	width: 4.5ch;
}
details.identity input {
	height: 1.4em;
}
details.identity nav.quiz {
	justify-content: flex-start;
	font-size: smaller;
}
details.identity input[name=m_id],
details.identity input[name=p_id] {
	position: absolute;
	border: none;
	width: 5ch;
	box-shadow: none;
	background: transparent;
	font-size: 9px;
	text-align: left;
	text-shadow: none;
}

details.test form {
	height: 100%;
}
details.test ul {
	height: 100%;
	grid-template-rows: minmax(60px, 1fr) repeat(6, 3ex);
}
details.test li.photo {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	justify-items: center;
	align-content: space-between;
}
details.test li.photo img {
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

dialog {
	background: var(--panelb);
	color: var(--color);
}
dialog legend:first-child {
	background: var(--summaryb) ! important;
	color: var(--summaryc) ! important;
}
dialog.password main {
	padding: 1.5ex 1em 3ex;
}
dialog.password label {
	display: grid;
}
dialog.password label label {
	display: block;
}
dialog.password samp {
	display: block;
	margin: 1ex 2em;
}
dialog.password dl {
	display: grid;
	font-size: smaller;
	grid-template-columns: 20pt 1fr;
	margin: 1ex 0 0;
}
dialog.password dd {
	margin: 0;
}
dialog.password footer {
	position: absolute;
	right: 10px;
	bottom: 10px;
}
dialog.password[name=password] main {
	height: 210px;
	width: 380px;
}


dialog[clyp-popup] {
	position: absolute;
	margin: 0;
	border-radius: 6px;
	border: 1px solid #888;
	padding: .5em;
	background: var(--popupb);
	box-shadow: 4px 4px 8px #0008;
	white-space: nowrap;
	user-select: none;
}
dialog[clyp-popup] form {
	display: flex;
	flex-direction: column;
	align-items: center;
}
dialog[clyp-popup=enumerate] form {
	font-size: small;
	align-items: normal;
	min-width: 150px;
}
dialog[clyp-popup=enumerate] span {
	text-align: right;
	color: var(--actionc);
	font-size: smaller;
	cursor: pointer;
}
dialog[clyp-popup=enumerate] label {
	padding-right: 4px;
}
dialog[clyp-popup=number] form {
	align-items: center;
	font-size: large;
}
dialog[clyp-popup=number] input {
	width: 6em;
}
dialog[clyp-popup=number] span {
	display: inline-block;
	margin: 8px 6px;
	border: 1px solid #888;
	border-radius: 1em;
	padding: 1px;
	min-width: 1em;
	line-height: 1em;
	text-align: center;
	background: var(--buttonb);
	color: var(--buttonc);
	filter: drop-shadow(2px 4px 6px #0008);
	cursor: pointer;
}
dialog[clyp-popup] span[clyp-compare] {
	padding: 1px .5em;
	font-size: medium;
}
dialog[clyp-popup=number] div:nth-child(6n+5) span {
	width: 4em;
}
dialog[clyp-popup=number] span.selected {
	box-shadow: 0 0 5px 3px var(--popups);
}

dialog[clyp-popup=date] form {
	display: grid;
	grid-template-rows: 200px 2em 2em;
	justify-items: center;
	align-items: center;
	font-size: large;
}
dialog[clyp-popup=date] plume-date {
	display: inline-block;
	height: 200px;
	width: 230px;
}
dialog[clyp-popup=date] input {
	width: 6em;
}
dialog[clyp-popup=date] span {
	display: inline-block;
	margin: 8px 6px;
	border: 1px solid #888;
	border-radius: 1em;
	padding: 1px;
	min-width: 1em;
	line-height: 1em;
	text-align: center;
	background: var(--buttonb);
	color: var(--buttonc);
	filter: drop-shadow(2px 4px 6px #0008);
	cursor: pointer;
}
dialog[clyp-popup=date] span.selected {
	box-shadow: 0 0 5px 3px var(--popups);
}
dialog[clyp-popup=date] span.disabled {
	filter: invert(1);
	box-shadow: inset 2px 2px 3px #bbb, inset -1px -1px 2px #000;
	cursor: not-allowed;
}
plume-date.popup main,
plume-date.popup menu,
plume-date.popup select {
	color: var(--color);
	background-color: var(--popupa);
}
plume-date.popup .alt {
/* 	background-color: #3264d280; */
	background-color: #44f8;
}
plume-date.popup .today {
	color: #000;
	background-color: hsl(60deg 60% 70%);
	outline: 0;
}
plume-date.popup li[class^=month]::before {
	color: #300;
	font-family: impact;
	letter-spacing: 4px;
	opacity: .3;
}
[clyp-listing] header {
	font-weight: bold;
	padding-bottom: 1ex;
	overflow-y: scroll;
}
[clyp-listing] main {
	overflow-y: scroll;
}
[clyp-listing] ol {
	display: grid;
	column-gap: 6px;
	border-radius: 1lh;
	padding: .3ex .3em .3ex .5em;
/* 	width: fit-content; */
}
[clyp-listing] header ol {
	justify-items: center;
	user-select: none;
	padding: 0 .3em 0 .5em;
}
[clyp-listing] header li {
	position: relative;
	border: 3px solid transparent;
	height: 1lh;
}
[clyp-listing] header li[clyp-sieve] {
	cursor: pointer;
}
[clyp-listing] header li[clyp-sievef] {
	cursor: zoom-in;
}
[clyp-listing] header li[clyp-sieves] {
	cursor: ns-resize;
}
[clyp-listing] header li.find {
	border: none;
}
[clyp-listing] header li.panel {
	border: var(--inputd);
	border-radius: 2ex;
	padding: var(--inputp);
	text-shadow: var(--inputt);
	box-shadow: var(--inputs);
}
[clyp-listing] header li:is([clyp-sieve], [clyp-sievef]):not(.find)::after {
	content: "🔍";
	opacity: 0;
	position: relative;
	right: -.5em;
	line-height: 1px;
	color: var(--pinc);
	text-shadow: var(--pins);
	font-size: small;
	cursor: pointer;
}
[clyp-listing] header li:is([clyp-sieve], [clyp-sievef]).find.warn::after {
	content: "⚠️";
	position: relative;
	right: -.5em;
	line-height: 1px;
	color: var(--pinc);
	text-shadow: var(--pins);
	font-size: small;
	cursor: pointer;
}
[clyp-listing] header li:is([clyp-sieve], [clyp-sievef]):not(.find).warn::after {
	content: "⚠️";
	opacity: 1;
}
[clyp-listing] header ol:hover li:is([clyp-sieve], [clyp-sievef]):not(input)::after,
[clyp-listing] header ol:hover li:is([clyp-sieve], [clyp-sieves])::before,
[clyp-listing] header ol:hover li:is([clyp-sieve], [clyp-sievef]) dbi {
	opacity: 1;
}
[clyp-listing] header li:is([clyp-sieve], [clyp-sieves])::before {
	content: "⬍";
	opacity: 0;
	display: inline-block;
	width: 20px;
	padding-right: .3em;
	text-align: right;
	line-height: 1px;
	color: var(--pinc);
	text-shadow: var(--pins);
	cursor: pointer;
}
[clyp-listing] header li.down::before  {opacity: 1;content:	 "⬇"}
[clyp-listing] header li.down1::before {opacity: 1;content:	"₁⬇"}
[clyp-listing] header li.down2::before {opacity: 1;content:	"₂⬇"}
[clyp-listing] header li.down3::before {opacity: 1;content:	"₃⬇"}
[clyp-listing] header li.down4::before {opacity: 1;content:	"₄⬇"}
[clyp-listing] header li.down5::before {opacity: 1;content:	"₅⬇"}
[clyp-listing] header li.down6::before {opacity: 1;content:	"₆⬇"}
[clyp-listing] header li.down7::before {opacity: 1;content:	"₇⬇"}
[clyp-listing] header li.down8::before {opacity: 1;content:	"₈⬇"}
[clyp-listing] header li.down9::before {opacity: 1;content:	"₉⬇"}
[clyp-listing] header li.up::before  {opacity: 1;content:	 "⬆︎"}
[clyp-listing] header li.up1::before {opacity: 1;content:	"₁⬆︎"}
[clyp-listing] header li.up2::before {opacity: 1;content:	"₂⬆︎"}
[clyp-listing] header li.up3::before {opacity: 1;content:	"₃⬆︎"}
[clyp-listing] header li.up4::before {opacity: 1;content:	"₄⬆︎"}
[clyp-listing] header li.up5::before {opacity: 1;content:	"₅⬆︎"}
[clyp-listing] header li.up6::before {opacity: 1;content:	"₆⬆︎"}
[clyp-listing] header li.up7::before {opacity: 1;content:	"₇⬆︎"}
[clyp-listing] header li.up8::before {opacity: 1;content:	"₈⬆︎"}
[clyp-listing] header li.up9::before {opacity: 1;content:	"₉⬆︎"}
[clyp-listing] header li input {
	width: calc(100% - 4em);
	border-radius: 2ex;
}
[clyp-listing] header li:is([clyp-sieve], [clyp-sievef]) dbi {
	content: "×";
	opacity: 0;
	display: inline-block;
	position: relative;
	top: -.3ch;
	right: 0;
	margin-left: -1.5em;
	border-radius: 50%;
	padding: 2px;
	width: .7em;
	line-height: .7em;
	font-size: x-small;
	text-align: center;
	text-shadow: none;3
	box-shadow: 1px 1px 2px #000e, inset 1px 1px 2px #fffa;
	background: #f886;
	color: #822;
	cursor: pointer;
}
[clyp-listing] header ol.wide {
	cursor: col-resize ! important;
}
/* 
[clyp-listing] main ol:nth-child(even) {
	background: var(--even);
}
 */
[clyp-listing] main ol.select {
	background: var(--selectb);
	color: var(--selectc);
}
[clyp-listing] main ol:hover {
	background: var(--hoverb) ! important;
	color: var(--hoverc) ! important;
}
[clyp-listing] main li {
/* 	height: 1.3em; */
	overflow-x: hidden;
	overflow-y: hidden;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}
[clyp-listing] main li:last-child button {
	font-size: 20px;
	font-weight: 900;
	margin: 0;
	border: none;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--pinc);
	text-shadow: var(--pins);
	transform: translate(-1pt, -3pt);
}
[clyp-listing] main li:last-child button:before {
	display: none;
}
[clyp-listing] main li:last-child button:active:enabled {
	box-shadow: none;
	transform: translate(0, -3pt);
}
[clyp-listing] input[type=text],
[clyp-listing] input[type=euro] {
	box-sizing: border-box;
	width: 100%;
}

li:has(>input[type=euro]) {
	position: relative;
}
li:has(>input[type=euro])::after {
	content: '€';
	position: absolute;
	font-family: sans-serif;
	text-shadow: var(--inputt);
	color: var(--inkc);
}

body > footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: right;
	background: var(--backh);
	z-index: var(--z-front);
}
body > footer span {
	font-size: 10pt;
	color: var(--tabonc);
	margin-right: 20px;
	cursor: pointer;
}
body > footer div {
	display: none;
	position: absolute;
	bottom: 0;
	right: 0px;
	background: #fffa;
	color: black;
	padding: .5em .5em .4em 1em;
	border-top-left-radius: 10% 30%;
	box-shadow: -4px -2px 8px #444;
	text-align: left;
	white-space: pre-line;
	cursor: se-resize;
}

img.secret {
	position: fixed;
	top: 0;
	right: 0;
	width: 20px;
	z-index: 999;
}
#style {
	position: fixed;
	top: 0;
	right: 20px;
	font-size: 6pt;
	margin: 0;
	padding: 1px 3px;
	width: 7em;
	z-index: 999;
}
body.secret {
	#style,
	details.identity input[name=m_id],
	details.identity input[name=p_id] {
		display: none;
	}
}

span[clyp-period] {
	position: relative;
	top: -1em;
	display: inline-block;
	padding: 6px 0;
	border-bottom-right-radius: 10px;
	font-size: 1rem;
	width: 4ch;
	text-align: center;
	box-shadow: 3px 3px 8px 1px #000;
	z-index: var(--z-input);
}
span[clyp-period="0"] {
	background: #4aa42f;
	color: #222;
	border-color: #222;
}
span[clyp-period="1"] {
	background: #66ddfb;
	color: #555;
	border-color: #555;
}
span[clyp-period="3"] {
	background: #9e9ede;
	color: #555;
	border-color: #555;
}
span[clyp-period="6"] {
	background: #76167d;
	color: #ddd;
	border-color: #ddd;
}
span[clyp-period="12"] {
	background: #ea3323;
	color: #ddd;
	border-color: #ddd;
}
span[clyp-period]::before {
	content: '';
	position: absolute;
	top: -3px;
	left: 0;
	width: 100%;
	border-top: 7px double;
}
span[clyp-period]::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	width: 8px;
	height: 8px;
	border-bottom-right-radius: 10px;
	background: linear-gradient(315deg, #444, #fff);
	box-shadow: -1px 0 2px #000;
}


div.wider,
div.glass {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: var(--z-glass);
}
div.wider.wide {
	display: block;
	cursor: col-resize;
}
body.slide,
body.slide details {
	user-select: none;
}
body.slide div.glass {
	display: block;
}
details.slide {
	z-index: var(--z-glass);
	box-shadow: var(--panels);
	animation: shake 1s 1 ease;
}
@keyframes shake {
	00%	{transform: translateY(-5px);}
	10%	{transform: translateY(5px);}
	20%	{transform: translateY(-4px);}
	30%	{transform: translateY(4px);}
	40%	{transform: translateY(-3px);}
	50%	{transform: translateY(3px);}
	60%	{transform: translateY(-2px);}
	70%	{transform: translateY(2px);}
	80%	{transform: translateY(-1px);}
	90%	{transform: translateY(1px);}
	100%{transform: translateY(0px);}
}

#meter {
	display: grid;
	grid-template-columns: 1fr auto;
	min-height: 1.8em;
}
#meter header {
	border-left: 2px dotted #ccc;
}
#meter header div {
	height: 1.4em;
	padding: 3px 1em 0 0;
}
#meter header div {
	border-bottom: 1px solid #aaa;
	padding-left: 1em;
	min-width: 15em;
}
#meter header div:nth-child(even) {
	border-color: transparent;
}
#meter header div:nth-child(even) span {
	position: relative;
	top: .5em;
}
#meter main {
	display: grid;
	overflow: auto;
	height: fit-content;
}
#meter ol {
	white-space: nowrap;
	border-bottom: 1px solid #bbb;
}
#meter main ol.selected,
#meter header div.selected {
	background: var(--selectb);
	color: var(--selectc);
}
#meter ol:nth-child(even) {
	background: var(--outputb);
}
#meter li {
	position: relative;
	height: 1.4em;
	display: inline-block;
	width: 10ch;
	text-align: right;
	padding: 3px 1.5em 0 0;
}
#meter li:last-of-type {
	width: 15ch;
	padding-right: 1em;
}
#meter li:nth-child(5n) {
	background: var(--outputc);
}
#meter li::after {
	position: absolute;
	right: 0.2em;
	top: -1.8ex;
}
#meter li.surge::after {
	content: '⬆︎';
	color: yellow;
}
#meter li.rise::after {
	content: '⬆︎';
	color: lightgreen;
	transform: rotateZ(45deg);
}
#meter li.balance::after {
	content: '⬆︎';
	color: white;
	transform: rotateZ(90deg);
}
#meter li.decline::after {
	content: '⬆︎';
	color: red;
	transform: rotateZ(135deg);
}
#meter li.crash::after {
	content: '⬆︎';
	color: black;
	transform: rotateZ(180deg);
}