/**
 * Cabrio Connexion, the three pages.
 *
 * The forms bring no look of their own. They inherit the theme's typography
 * and the colour of the text around them; under a theme with a theme.json the
 * button is the theme's button (.wp-element-button); fields, rules and muted
 * lines are drawn from currentColor, so a form reads on a light section and on
 * a dark one alike.
 *
 * Every colour and every shape of a field is a --cab-cnx-* custom property
 * with a fallback that follows the surrounding text. The plugin sets few of
 * them (see inc/appearance.php); a theme sets the others on .cab-connexion, or
 * through the cab_cnx_colors filter. That is the way in, rather than out-
 * weighing these rules.
 *
 * LES RÈGLES DES CHAMPS GARDENT LEUR POIDS. Les écrire à spécificité nulle,
 * pour que tout thème passe devant, a été essayé pour la 1.13.0 et abandonné :
 * les règles générales d'un thème passaient aussi, celles qui ne visaient pas
 * ces champs. Relevé sur cab-miniworld : son anneau de focus pour « tout ce qui
 * n'a pas de style à soi » arrondit à 2 px, et chaque champ de l'extension
 * aurait perdu ses 8 px au premier clic. Seuls le repli du bouton et la carte
 * (inc/appearance.php) sont à poids nul : ils ne servent qu'en l'absence du
 * thème.
 *
 * The class names are all under one root so that no theme, and no other form on
 * the page, can collide with them.
 */

/* ---------- Standing ---------- */

.cab-connexion {
	max-width: 30rem;
	margin-inline: auto;
}

.cab-connexion--account {
	display: grid;
	gap: 1.6rem;
}

.cab-connexion__form {
	display: grid;
	gap: 1.1rem;
}

.cab-connexion__intro {
	margin: 0;
	font-size: 0.95em;
}

.cab-connexion__field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.cab-connexion__field label {
	font-size: 0.9em;
	font-weight: 600;
}

.cab-connexion__field input,
.cab-connexion__field textarea {
	box-sizing: border-box;
	width: 100%;
}

.cab-connexion__field textarea {
	resize: vertical;
	min-height: 6rem;
}

/*
 * Les trois parties du formulaire.
 *
 * Le décor du titre appartient au thème hôte : il n'y a ici que ce qu'il faut
 * pour que la page se tienne sans lui : un intertitre lisible et de l'air entre
 * les parties.
 */
.cab-connexion__section {
	display: grid;
	gap: 1.1rem;
}

.cab-connexion__section + .cab-connexion__section {
	margin-block-start: 0.6rem;
}

.cab-connexion__section-titre {
	margin: 0;
	font-size: 1.15em;
}

/* A checkbox reads left to right, not top to bottom. */
.cab-connexion__field--check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.cab-connexion__field--check input {
	width: auto;
	margin: 0;
}

.cab-connexion__field--check label {
	font-weight: 400;
}

.cab-connexion__hint {
	font-size: 0.85em;
}

.cab-connexion__actions,
.cab-connexion__aside {
	margin: 0;
}

.cab-connexion__aside {
	font-size: 0.9em;
}

.cab-connexion__sep {
	padding-inline: 0.4rem;
}

.cab-connexion__notice {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
}

/*
 * The field robots fill in. Taken out of the flow rather than switched off: a
 * robot that reads the stylesheet skips display:none, while a screen reader is
 * kept away by aria-hidden and tabindex in the markup.
 */
.cab-connexion__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- The member's own page ---------- */

.cab-connexion__card {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.cab-connexion__avatar {
	flex: 0 0 auto;
}

.cab-connexion__name {
	margin: 0;
	font-size: 1.3em;
	line-height: 1.2;
}

.cab-connexion__mail,
.cab-connexion__since {
	margin: 0.2rem 0 0;
	font-size: 0.9em;
}

.cab-connexion__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

@media (max-width: 480px) {
	.cab-connexion__card {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Le choix de la photo de profil : un aperçu de ce qui est en place, et les
 * trois réponses dessous. Le `fieldset` est remis à plat : son cadre et sa
 * légende en retrait ne ressemblent à rien des autres champs.
 */

/* Les trois champs qui disent qui l'on est, tenus ensemble. */
.cab-connexion__identite {
	display: grid;
	gap: 1.1rem;
	align-content: start;
}

/*
 * LE MÊME SOUFFLE QUE LES AUTRES CHAMPS. Le titre touchait l'aperçu, zéro
 * pixel mesuré, et les trois réponses se serraient à six, quand deux champs
 * voisins du formulaire respirent à dix-huit. Le bloc de la photo prend donc
 * l'écart des autres, et ses réponses la moitié.
 */
.cab-connexion__field--avatar {
	display: grid;
	gap: 1.1rem;
	justify-items: start;
	align-content: start;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Une légende de `fieldset` ne se range pas dans la grille : le navigateur la
 * pose à part, en haut du cadre, et l'écart de la grille ne s'applique pas à
 * elle : mesuré à zéro pixel sous le titre. Son air se dit donc en marge.
 */
.cab-connexion__field--avatar legend {
	margin-block-end: 0.7rem;
	padding: 0;
	font-size: 0.9em;
	font-weight: 600;
}

.cab-connexion__apercu {
	line-height: 0;
}

.cab-connexion__choix {
	display: grid;
	gap: 0.55rem;
	align-content: start;
	justify-self: stretch;
}

.cab-connexion__choix-ligne {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cab-connexion__choix-ligne label {
	font-weight: 400;
}

.cab-connexion__choix-ligne input[type="radio"] {
	width: auto;
	margin: 0;
	flex: none;
}

.cab-connexion__field--avatar input[type="file"],
.cab-connexion__field--avatar input[type="url"] {
	box-sizing: border-box;
	width: calc(100% - 1.6rem);
	margin-inline-start: 1.6rem;
}

/*
 * L'espace du membre (1.15.0) : le menu à côté du formulaire.
 *
 * Le bloc du compte le dessine lui-même, sous n'importe quel thème : une
 * grille qui pose le menu à gauche quand l'espace a la place (requête de
 * conteneur, donc selon la largeur que le thème lui donne, pas selon l'écran),
 * au-dessus sinon. Le menu reste en vue pendant que le formulaire défile, sous
 * la barre d'administration quand elle est là.
 */
/*
 * LA LARGEUR EST CELLE DU THÈME. Un `max-width` posé ici écrasait la largeur
 * de contenu que le thème donne à ses blocs : mesuré sous Twenty Twenty-Five,
 * l'espace faisait 1 024 px sous un titre de 645, sans s'aligner sur lui. Seule
 * la colonne du formulaire est bornée, pour qu'il ne s'étale pas sur un thème
 * qui donne toute la largeur.
 */
.cab-connexion-espace {
	container-type: inline-size;
}

/*
 * Trois zones : la carte du membre, le menu, le compte. Empilées (téléphone),
 * dans cet ordre : qui l'on est, où aller, puis le reste (1.18.0). En grand, le
 * menu tient la colonne de gauche sur toute la hauteur, la carte coiffe le
 * compte à droite.
 */
.cab-connexion-espace__grille {
	display: grid;
	grid-template-areas: "carte" "menu" "compte";
	gap: 2rem;
}

.cab-connexion-espace__carte {
	grid-area: carte;
}

.cab-connexion-espace .cab-connexion-menu {
	grid-area: menu;
}

.cab-connexion-espace .cab-connexion--account {
	grid-area: compte;
}

.cab-connexion-espace .cab-connexion {
	max-width: none;
	margin-inline: 0;
}

@container (min-width: 44rem) {
	.cab-connexion-espace__grille {
		grid-template-columns: minmax(12rem, 16rem) minmax(0, 46rem);
		grid-template-rows: auto 1fr;
		grid-template-areas: "menu carte" "menu compte";
		column-gap: 3rem;
		row-gap: 1.6rem;
	}

	.cab-connexion-espace .cab-connexion-menu {
		position: sticky;
		top: calc(1.5rem + var(--wp-admin--admin-bar--height, 0px));
		align-self: start;
	}
}

/*
 * Le menu : un habillage simple, tiré du thème comme les champs. Le filet est
 * celui des champs, la couleur des liens celle du thème ; un thème qui veut
 * autre chose pose les variables ou reprend `.cab-connexion-menu`.
 */
.cab-connexion-menu {
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--cab-cnx-line, color-mix(in srgb, currentColor 22%, transparent));
	border-radius: var(--cab-cnx-radius, 6px);
}

.cab-connexion-menu__titre {
	margin: 0 0 0.5rem;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cab-cnx-muted, color-mix(in srgb, currentColor 70%, transparent));
}

.cab-connexion-menu__liste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-connexion-menu__liste li + li {
	border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.cab-connexion-menu__liste a {
	display: block;
	padding-block: 0.45rem;
}

.cab-connexion-menu__liste + .cab-connexion-menu__liste,
.cab-connexion-menu__liste + .cab-connexion-menu__groupe,
.cab-connexion-menu__groupe + .cab-connexion-menu__liste,
.cab-connexion-menu__groupe + .cab-connexion-menu__groupe {
	margin-block-start: 0.6rem;
	padding-block-start: 0.6rem;
	border-top: 1px solid var(--cab-cnx-line, color-mix(in srgb, currentColor 22%, transparent));
}

/* The title of the part reached through the menu lands below the admin bar. */
.cab-connexion__section-titre {
	scroll-margin-top: calc(1.5rem + var(--wp-admin--admin-bar--height, 0px));
}

/* ---------- Looks: from the surrounding text, unless the theme says ---------- */

.cab-connexion__intro, .cab-connexion__hint, .cab-connexion__sep, .cab-connexion__mail, .cab-connexion__since {
	color: var(--cab-cnx-muted, color-mix(in srgb, currentColor 70%, transparent));
}

/* The member's name in the theme's accent, when it names one. */
.cab-connexion__name {
	color: var(--cab-cnx-accent, inherit);
}

/* The member's level (1.19.0): a small pill in the theme's accent. */
.cab-connexion__role {
	display: inline-block;
	margin: 0.35rem 0 0.15rem;
	padding: 0.1rem 0.65rem;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--cab-cnx-accent, inherit);
	background: color-mix(in srgb, var(--cab-cnx-accent, currentColor) 12%, transparent);
}

/* Son propre nom : un thème dont les étiquettes ne sont pas de la couleur de
   son texte n'a pas à choisir entre elles et le reste. */
.cab-connexion__field label, .cab-connexion__field--avatar legend {
	color: var(--cab-cnx-label, inherit);
}

.cab-connexion__field--check label, .cab-connexion__choix-ligne label {
	color: var(--cab-cnx-ink, inherit);
}

/*
 * Le champ se laisse habiller par le thème hôte : un site qui a déjà une forme
 * de champ, un arrondi, un rembourrage, un filet, la pose dans les variables,
 * comme les couleurs. Sinon, le champ est tiré de la couleur du texte qui
 * l'entoure, transparent sur la section, et se lit aussi bien sur une page
 * claire que sur une page sombre.
 *
 * `font: inherit` reprend AUSSI l'interligne de la page, faite pour un
 * paragraphe : mesuré, 48 px de haut contre 43 aux champs du thème hôte à
 * côté. Une ligne unique dans un cadre n'a pas de rythme de lecture.
 */
.cab-connexion__field input, .cab-connexion__field textarea, .cab-connexion__field--avatar input[type="file"], .cab-connexion__field--avatar input[type="url"] {
	padding: var(--cab-cnx-pad, 0.6rem 0.75rem);
	font: inherit;
	line-height: 1.4;
	color: var(--cab-cnx-ink, inherit);
	background: var(--cab-cnx-surface, transparent);
	border: 1px solid var(--cab-cnx-line, color-mix(in srgb, currentColor 35%, transparent));
	border-radius: var(--cab-cnx-radius, 3px);
}

.cab-connexion__field textarea {
	line-height: 1.5;
}

/*
 * The picture's two answers sit under their radio, a step lighter. After the
 * rule above, whose `font: inherit` would otherwise put back the full size:
 * measured, 18 px and 43 px high instead of 17.1 and 45 on cab-miniworld.
 */
.cab-connexion__field--avatar input[type="file"], .cab-connexion__field--avatar input[type="url"] {
	padding: 0.45rem 0.6rem;
	font: inherit;
	font-size: 0.95em;
}

.cab-connexion__field--check input, .cab-connexion__choix-ligne input {
	padding: 0;
	accent-color: var(--cab-cnx-accent, currentColor);
}

.cab-connexion__field input:focus-visible, .cab-connexion__field textarea:focus-visible {
	outline: 2px solid var(--cab-cnx-accent, currentColor);
	outline-offset: 1px;
	border-color: var(--cab-cnx-accent, currentColor);
}

/*
 * LE BOUTON EST CELUI DU THÈME. Sous un thème qui a un theme.json, il porte
 * `.wp-element-button`, que les styles globaux habillent comme tous ses
 * boutons, et rien d'ici ne le touche. Ce qui suit ne sert qu'au thème
 * classique, qui n'a pas cette règle : un contour à la couleur du texte,
 * lisible partout, plutôt qu'une couleur devinée ; et ses propres règles
 * `button` passent devant.
 */
:where(.cab-connexion__submit:not(.wp-element-button)) {
	padding: 0.7rem 1.6rem;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--cab-cnx-radius, 3px);
	cursor: pointer;
}

:where(.cab-connexion__submit:not(.wp-element-button):hover) {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

:where(.cab-connexion__submit) {
	cursor: pointer;
}

/*
 * The tint and the rule carry the meaning at a glance; the text itself stays
 * the page's ink, which is the only colour sure to read on either wash.
 */
.cab-connexion__notice {
	color: var(--cab-cnx-ink, inherit);
	border-left: 3px solid;
	border-radius: 3px;
}

.cab-connexion__notice--error {
	border-left-color: var(--cab-cnx-bad, #b03a12);
	background: color-mix(in srgb, var(--cab-cnx-bad, #b03a12) 10%, transparent);
}

.cab-connexion__notice--done {
	border-left-color: var(--cab-cnx-good, #3f7a2c);
	background: color-mix(in srgb, var(--cab-cnx-good, #3f7a2c) 10%, transparent);
}

.cab-connexion__avatar, .cab-connexion__apercu img {
	border-radius: 50%;
}

/* ---------- The member's activity (1.16.0) ---------- */

/*
 * Dans le style de wpForo : une pastille ronde par compteur, le pictogramme
 * dans sa teinte, le fond tiré de la même teinte pour se lire sur une page
 * claire comme sur une sombre ; puis l'historique de chaque compteur. Le texte
 * garde la couleur et la typographie du thème.
 */
.cab-connexion-activite {
	gap: 1.6rem;
}

.cab-connexion-stats {
	display: grid;
	/* En em : la place suit le corps du texte du thème. En rem, « Commentaires »
	   se coupait en plein mot sous la grande police de CabMiniWorld. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13em), 1fr));
	gap: 1rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-connexion-stat__lien {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: inherit;
	text-decoration: none;
}

.cab-connexion-stat__icone {
	display: grid;
	flex: none;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	color: var(--cab-cnx-stat, currentColor);
	background: color-mix(in srgb, var(--cab-cnx-stat, currentColor) 16%, transparent);
}

.cab-connexion-stat__svg {
	width: 1.45rem;
	height: 1.45rem;
}

.cab-connexion-stat__donnees {
	display: grid;
	line-height: 1.25;
}

.cab-connexion-stat__valeur {
	font-size: 1.35em;
	font-weight: 600;
}

.cab-connexion-stat__titre {
	font-size: 0.95em;
	color: var(--cab-cnx-muted, color-mix(in srgb, currentColor 75%, transparent));
}

a.cab-connexion-stat__lien:hover .cab-connexion-stat__titre,
a.cab-connexion-stat__lien:focus-visible .cab-connexion-stat__titre {
	text-decoration: underline;
}

/* The tints wpForo gives the same counters. */
.cab-connexion-stat--publications { --cab-cnx-stat: #ba69f8; }
.cab-connexion-stat--commentaires { --cab-cnx-stat: #ee3ba9; }
.cab-connexion-stat--forum { --cab-cnx-stat: #3f9fc4; }
.cab-connexion-stat--sujets { --cab-cnx-stat: #c07d74; }

.cab-connexion-historique {
	scroll-margin-top: calc(1.5rem + var(--wp-admin--admin-bar--height, 0px));
}

/*
 * Les onglets (1.17.0), à la façon de wpForo : pictogramme et intitulé dans la
 * couleur d'accent du thème, l'onglet ouvert souligné de la même couleur sur un
 * filet gris. Sans script, la barre reste cachée et tout se lit à la suite.
 */
.cab-connexion-onglets {
	display: grid;
	gap: 1rem;
	scroll-margin-top: calc(1.5rem + var(--wp-admin--admin-bar--height, 0px));
}

.cab-connexion-onglets__liste {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 3px solid color-mix(in srgb, currentColor 10%, transparent);
}

.cab-connexion-onglets__liste[hidden],
.cab-connexion-onglets .cab-connexion-historique[hidden] {
	display: none;
}

.cab-connexion-onglets__onglet {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 -3px;
	padding: 0.65rem 1.1rem;
	font: inherit;
	color: var(--cab-cnx-accent, currentColor);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	cursor: pointer;
}

.cab-connexion-onglets__onglet:hover {
	border-bottom-color: color-mix(in srgb, var(--cab-cnx-accent, currentColor) 35%, transparent);
}

.cab-connexion-onglets__onglet[aria-selected="true"] {
	border-bottom-color: var(--cab-cnx-accent, currentColor);
}

.cab-connexion-onglets__onglet .cab-connexion-stat__svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* The tab names the history: its own title is kept for screen readers only. */
.cab-connexion-onglets--actifs .cab-connexion-historique__titre {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


.cab-connexion-historique__titre {
	margin: 0 0 0.4rem;
	font-size: 1em;
}

.cab-connexion-historique__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-connexion-historique__item {
	padding-block: 0.7rem;
	border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.cab-connexion-historique__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	margin: 0;
}

.cab-connexion-historique__note {
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	font-size: 0.78em;
	background: color-mix(in srgb, currentColor 9%, transparent);
}

.cab-connexion-historique__meta,
.cab-connexion-historique__compte {
	margin: 0.15rem 0 0;
	font-size: 0.85em;
	color: var(--cab-cnx-muted, color-mix(in srgb, currentColor 70%, transparent));
}

.cab-connexion-historique__texte {
	margin: 0.3rem 0 0;
	font-size: 0.92em;
}

.cab-connexion-historique__pages {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-top: 0.6rem;
	font-size: 0.9em;
}

.cab-connexion-historique__tout {
	margin: 0.5rem 0 0;
	font-size: 0.9em;
}

/* L'œil des champs de mot de passe (1.25.0), quand l'écran de réglages le
 * demande. Le bouton se pose dans le champ, à droite ; il prend la couleur du
 * texte du champ, sans fond ni bordure, au poids de deux classes pour tenir
 * face à la règle générale d'un thème sur `button`. L'œil d'Edge est retiré
 * là où le nôtre est posé, pour ne pas en montrer deux. */
.cab-connexion__field .cab-connexion__secret {
	position: relative;
	display: block;
}

.cab-connexion__field .cab-connexion__secret input {
	padding-inline-end: 2.9em;
}

.cab-connexion__field .cab-connexion__secret input::-ms-reveal {
	display: none;
}

.cab-connexion__field .cab-connexion__oeil {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75em;
	margin: 0;
	padding: 0;
	color: var(--cab-cnx-ink, inherit);
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	opacity: 0.7;
}

.cab-connexion__field .cab-connexion__oeil[hidden] {
	display: none;
}

.cab-connexion__field .cab-connexion__oeil:hover,
.cab-connexion__field .cab-connexion__oeil:focus-visible {
	opacity: 1;
}

.cab-connexion__field .cab-connexion__oeil:focus-visible {
	outline: 2px solid var(--cab-cnx-accent, currentColor);
	outline-offset: -4px;
}

.cab-connexion__oeil svg {
	width: 1.25em;
	height: 1.25em;
}

.cab-connexion__oeil .cab-connexion__oeil-ferme,
.cab-connexion__oeil[data-visible] .cab-connexion__oeil-ouvert {
	display: none;
}

.cab-connexion__oeil[data-visible] .cab-connexion__oeil-ferme {
	display: block;
}