/**
 * It's Rugby — App Shell : habillage « mode app ».
 *
 * TOUTES les règles sont préfixées html.is-app : sur le web, cette feuille
 * n'a aucun effet (la barre est display:none, la chrome reste intacte).
 * Charte réutilisée depuis itsrugby-common.css : --itsclt-teal / -green /
 * -vanilla / -ink / -sec. Angles droits (jamais de border-radius).
 */

/* ── Barre d'onglets : masquée par défaut (web), affichée seulement en app ── */
.its-app-tabbar {
	display: none;
}

/* ── Bannière Pronos (sous le ticker) : masquée par défaut (web), app only ── */
.its-app-home-promo {
	display: none;
}

html.is-app .its-app-home-promo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 14px;
	background: #1A1A1A; /* identique au fond du ticker (nav.scores-ticker) */
	color: var(--g-bright, #8ED968);
	text-decoration: none;
	font-weight: 800;
	font-size: 14px;
	border-bottom: 2px solid var(--g-bright, #8ED968);
}

/* Couleur portée par les enfants (spans) : le <a> voit son color forcé à
   `inherit` par la règle whitelist .its-v2 a[class]:not(...) de common.css
   (spécificité imbattable sans !important). Les <span>/svg ne sont pas ciblés. */
html.is-app .its-app-home-promo-ico {
	flex: 0 0 auto;
	display: flex;
	color: var(--g-bright, #8ED968);
}

html.is-app .its-app-home-promo-ico svg {
	width: 20px;
	height: 20px;
}

html.is-app .its-app-home-promo-txt {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--g-bright, #8ED968);
}

/* ── Barre de progression de navigation (masquée hors app) ──────────────── */
.its-app-progress {
	display: none;
}

html.is-app .its-app-progress {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 10000;
	background: var(--itsclt-green, #8ED968);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
}

html.is-app .its-app-progress.is-active {
	opacity: 1;
	transition: transform 0.2s ease;
}

html.is-app .its-app-progress.is-done {
	opacity: 0;
	transition: transform 0.15s ease, opacity 0.25s ease 0.05s;
}

/* iOS/WKWebView : certaines pages posent body{overflow:hidden auto}, ce qui
   fait du body un conteneur de défilement → position:fixed « décroche » et
   suit le contenu (Chrome desktop l'ignore, iOS non). On normalise SEULEMENT
   en mode app : overflow-x:clip empêche le scroll horizontal SANS créer de
   conteneur de défilement (donc fixed reste ancré à l'écran) ; overflow-y
   visible rend le défilement au document (html), pas au body. */
html.is-app,
html.is-app body {
	/* Fallback pour les WebView Android à Chromium ancien qui n'implémentent PAS
	   overflow:clip : sans lui, clip retombe sur `visible`, rien ne contient la
	   largeur, un débordement transitoire (ticker) déclenche le dézoom
	   overview-mode du WebView → innerWidth grimpe (1706) et casse la tabbar.
	   `hidden` est universellement supporté et borne la page à device-width. */
	overflow-x: hidden;
	overflow-y: visible;
	/* coupe le rebond élastique horizontal iOS (« slide à droite ») */
	overscroll-behavior-x: none;
}
/* Moteurs modernes (Chromium 90+, iOS 16+) : on privilégie clip, qui coupe le
   scroll horizontal SANS faire du body un conteneur de défilement (donc
   position:fixed reste ancré — cf. commentaire ci-dessus). */
@supports (overflow: clip) {
	html.is-app,
	html.is-app body {
		overflow-x: clip;
	}
}

html.is-app .its-app-tabbar {
	display: flex;
	position: fixed;
	/* Barre FLOTTANTE (façon Instagram, mais angles droits — charte) :
	   détachée des bords et posée AU-DESSUS de la safe area → plus de
	   « trou blanc » sous la barre, le contenu défile derrière. */
	left: 12px;
	right: 12px;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
	z-index: 9990;
	/* left + right + width:auto : la barre se cale sur l'écran sans dépendre
	   de l'ICB (100vw/innerWidth déraille si une page déborde en X).
	   Reste correcte même si un débordement transitoire gonfle innerWidth. */
	width: auto;
	/* Fond noir + texte VANILLA (choix Félix 30/07) : lisible sur tous les
	   fonds du site, et raccord avec le ticker. */
	background: #1A1A1A;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
	/* Pilule arrondie : exception à la règle « angles droits » validée par
	   Félix pour CETTE barre uniquement (30/07). !important OBLIGATOIRE :
	   common.css applique la charte via `*{border-radius:0!important}` —
	   même contournement que .media-play et les avatars (50%!important).
	   overflow:hidden pour que le feedback :active ne dépasse pas des coins. */
	border-radius: 999px !important;
	overflow: hidden;
	padding: 0 6px;
	touch-action: manipulation;
}

/* Android : la webview V1 n'est pas edge-to-edge → env(safe-area-inset-bottom)
   vaut 0 ET la barre système de l'OS occupe déjà la zone sous la webview. Les
   12px d'offset s'empilaient dessus : tabbar visuellement plus haute que sur
   iOS (remonté par Félix, 01/08). Offset réduit à 8px — on GARDE un dégagement
   (demande Félix : pas de barre collée), et l'inset reste dans le calc pour le
   jour où l'app passera edge-to-edge (V2 targetSdk 36). iOS ne matche jamais
   .is-app-android : zéro impact. */
html.is-app-android .its-app-tabbar {
	bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}

html.is-app .its-app-tab {
	flex: 1 1 0;
	/* min-width:0 : sans lui, les libellés longs (« Compétitions ») forcent
	   le débordement horizontal et les onglets se tassent inégalement */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 54px;
	padding: 8px 2px 6px;
	color: var(--itsclt-vanilla, #F2E5D2);
	font-weight: 600;
	text-decoration: none;
	position: relative;
	/* supprime le délai de tap ~300 ms → clic instantané */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Couleur AUSSI portée par les enfants (svg/label) : sur les pages où
   .its-v2 englobe le footer, la règle whitelist `.its-v2 a[class]:not(...)`
   de common.css force color:inherit sur le <a> (spécificité imbattable sans
   !important — même piège que la bannière promo ci-dessus) → les onglets
   héritaient du teal du site sur fond noir. Les <span>/<svg> ne sont pas
   ciblés par cette règle. */
html.is-app .its-app-tab .its-app-tab-ico,
html.is-app .its-app-tab .its-app-tab-label {
	color: var(--itsclt-vanilla, #F2E5D2);
}

/* Feedback immédiat au tap (avant même la navigation) */
html.is-app .its-app-tab:active {
	background: rgba(255, 255, 255, 0.08);
}

html.is-app .its-app-tab.is-active {
	color: var(--g-bright, #8ED968);
}

html.is-app .its-app-tab.is-active .its-app-tab-ico,
html.is-app .its-app-tab.is-active .its-app-tab-label {
	color: var(--g-bright, #8ED968);
}

/* Repère d'onglet actif : trait g-bright en haut, angle droit */
html.is-app .its-app-tab.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 3px;
	background: var(--itsclt-green, #8ED968);
}

html.is-app .its-app-tab-ico {
	display: block;
	flex: 0 0 auto;
}

html.is-app .its-app-tab-label {
	line-height: 1;
	max-width: 100%;
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Hub « Plus » (page /plus/) : raccourcis groupés, style app ──────────── */
.its-app-hub {
	display: block;
	max-width: 680px;
	margin: 0 auto;
}
.its-app-hub-group {
	margin-bottom: 18px;
	background: #fff;
	border: 1px solid var(--itsclt-vanilla, #E8D8C0);
}
.its-app-hub-title {
	padding: 10px 16px;
	background: var(--itsclt-vanilla, #F2E5D2);
	color: var(--itsclt-teal, #1C3D34);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.its-app-hub-item {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 16px;
	border: 0;
	border-top: 1px solid var(--itsclt-vanilla, #E8D8C0);
	background: #fff;
	color: var(--itsclt-teal, #1C3D34);
	font-size: 15px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}
.its-app-hub-title + .its-app-hub-item {
	border-top: 0;
}
.its-app-hub-item::after {
	content: "›";
	margin-left: auto;
	color: var(--itsclt-sec, #9B9382);
	font-size: 20px;
	line-height: 1;
}
.its-app-hub-item:hover {
	background: rgba(28, 61, 52, 0.04);
}
/* En app : liste bord à bord (pleine largeur) */
html.is-app .its-app-hub {
	max-width: none;
}

/* ── Anti-zoom iOS au focus d'un champ ──────────────────────────────────── */
/* iOS/WKWebView zoome automatiquement quand on met le focus sur un champ dont
   la police fait < 16px, puis reste zoomé (→ page décalée, « slide » de 24px
   sur la connexion : inputs à 15px, 390×15/16 = 366). 16px = plus de zoom. */
html.is-app input,
html.is-app textarea,
html.is-app select {
	font-size: 16px;
}

/* ── Anti-débordement horizontal en app ─────────────────────────────────── */
/* Rien de plus large que l'écran : pubs (bannières px), embeds, images.
   Complète overflow-x:clip (qui coupe) en faisant plutôt rétrécir le contenu. */
html.is-app img,
html.is-app iframe,
html.is-app video,
html.is-app embed,
html.is-app object {
	max-width: 100%;
}

/* Page connexion : forcer UNE colonne en app, quelle que soit la largeur de
   layout de la WebView (si elle ne rend pas à device-width, la grille 2 col
   dépasserait l'écran). Sélecteur plus spécifique que la règle de base. */
html.is-app body.pmpro-login .its-login-shell {
	grid-template-columns: 1fr;
}

/* ── Masquage de la chrome « site web » + place pour la barre ────────────── */
html.is-app .site-header,
html.is-app .site-footer {
	display: none;
}

html.is-app body {
	/* Réserve sous le contenu : hauteur de barre (54) + décollement bas (12)
	   + respiration (12), au-dessus de la safe area. */
	padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* ── Espace perso : drill-down menu ↔ section (vue app) ───────────────────
   On ne restyle PAS la nav (le responsive mobile natif du thème s'en charge :
   colonne, pleine largeur, accordéon). On sépare juste en 2 vues via l'URL
   (classe posée par app-shell.js) pour ne pas empiler menu + contenu. */

/* VUE MENU (pas de section dans l'URL) : nav plein écran, contenu masqué */
html.is-app.its-app-espace-menu .its-account-content {
	display: none;
}

/* VUE SECTION (?compte_section=… présent) : contenu seul + retour, nav masquée */
html.is-app.its-app-espace-section .its-account-nav {
	display: none;
}
/* Sous-page = pas de gros hero, on maximise le contenu */
html.is-app.its-app-espace-section .page-hero {
	display: none;
}

/* ── Sections profil : formulaires façon app (partagé par toutes) ─────────
   Champs pleine largeur et tappables, CTA pleine largeur, champ tél empilé. */

/* Le cap desktop de 480px donne des champs « à moitié de page » → pleine largeur */
html.is-app .its-account-form,
html.is-app .its-account-form-sep {
	max-width: none;
}

/* Champs plus hauts (confort tactile) + 16px OBLIGATOIRE : la règle générique
   html.is-app input{16px} est battue en spécificité par .its-account-form
   input[type=…]{14px} du thème → les champs profil zoomaient encore au focus
   (cause du « champ à moitié de page » : la WebView reste zoomée). On remet
   16px ici avec une spécificité suffisante. */
html.is-app .its-account-form input[type="text"],
html.is-app .its-account-form input[type="email"],
html.is-app .its-account-form input[type="password"],
html.is-app .its-account-form input[type="tel"],
html.is-app .its-account-form input[type="number"],
html.is-app .its-account-form select,
html.is-app .its-account-form textarea,
html.is-app .its-account-phone-num,
html.is-app .its-account-phone-code {
	padding: 13px 14px;
	font-size: 16px;
}

/* Champ téléphone : code pays + numéro sur UNE seule ligne (côte à côte).
   Le code peut rétrécir (min-width:0) pour toujours tenir avec le numéro. */
html.is-app .its-account-phone-row {
	flex-direction: row;
	align-items: stretch;
}
html.is-app .its-account-phone-code {
	width: auto;
	max-width: none;
	flex: 0 1 150px;
	min-width: 0;
}
html.is-app .its-account-phone-num {
	flex: 1 1 auto;
	min-width: 0;
}

/* Bouton principal (Enregistrer, Mettre à jour…) : pleine largeur, centré */
html.is-app .its-account-form-actions {
	flex-direction: column;
	gap: 8px;
}
html.is-app .its-account-form-actions .its-btn {
	width: 100%;
	justify-content: center;
	padding: 14px 18px;
	font-size: 15px;
}

/* Champs en lecture seule (email affiché…) : pleine largeur cohérente */
html.is-app .its-account-readonly {
	width: 100%;
	box-sizing: border-box;
}

/* Barre « Retour » injectée (visible en vue section uniquement) */
.its-app-espace-back {
	display: none;
}
html.is-app.its-app-espace-section .its-app-espace-back {
	display: flex;
	align-items: baseline;
	gap: 10px;
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 14px 16px;
	background: #fff;
	border-bottom: 1px solid var(--itsclt-vanilla, #E8D8C0);
	text-decoration: none;
}
html.is-app .its-app-espace-back-arrow {
	font-weight: 500;
	color: var(--itsclt-teal, #1C3D34);
}
html.is-app .its-app-espace-back-title {
	color: var(--itsclt-sec, #9B9382);
	font-size: 14px;
}

/* Appui long sur un lien : neutralise le menu natif iOS (« Ouvrir dans Safari »,
   « Copier le lien », aperçu) qui faisait sortir de l'app. Uniquement en app.
   On ne touche PAS à -webkit-user-select → la sélection de texte reste possible.
   NB : complément natif recommandé côté app = WKWebView.allowsLinkPreview = false. */
html.is-app a {
	-webkit-touch-callout: none;
}

/* ── Home app : PAS de réordonnancement CSS ───────────────────────────────────
   03/08 : l'ordre des sections (Ligne 22 en 2e, compétitions groupées…) a été
   déplacé dans l'option its_home_blocks côté serveur → web et app partagent le
   même DOM, l'admin des blocs est la seule source de vérité. L'ancien
   réordonnancement flex gaté .is-app (commit 12f10ee) est retiré : il aurait
   écrasé silencieusement tout réordonnancement fait en admin. */

/* ── Safe area haute : RIEN côté app-shell ────────────────────────────────
   Depuis le build 8 (ios.contentInset:'never'), la webview couvre tout l'écran
   et l'encoche est gérée selon le principe du brief du 16/09 : le padding
   safe-area est porté par l'élément qui porte le FOND (cf. .site-header dans
   itsrugby-common.css), jamais par le body ni par un aplat séparé — les deux
   recréent une bande (verte avec l'aplat, vanilla sans, constaté en prod).
   Supprimés le 16/09 : `html.is-app body{padding-top:env(...)}` et l'aplat
   fixe #its-app-safetop (+ son JS de mesure). Ne pas les remettre. */

/* NEUTRALISATION des règles supprimées ci-dessus, toujours présentes dans le
   <style id="wpr-usedcss"> des ~330 000 pages dont le Used CSS a été généré
   avant le 16/09 (constaté sur la home .fr : réserve safe area comptée deux
   fois, bande teal + bloc vide ~50 pt). Vider le Used CSS en masse est exclu
   (incident du 22/07) : ce fichier est hors RUCSS et servi en entier, donc ces
   annulations s'appliquent partout immédiatement. Le :not(#its-app-x) monte la
   spécificité au-dessus de `html.is-app body` quel que soit l'ordre des feuilles.
   À retirer quand le Used CSS aura été régénéré partout. */
html.is-app:not(#its-app-x) body {
	padding-top: 0;
}
html.is-app:not(#its-app-x) body::after {
	content: none;
	display: none;
}

/* Home : le header étant masqué en app, c'est le TICKER qui porte le fond en
   haut de page. Il prend donc la réserve de safe area : son fond #1A1A1A
   remonte derrière l'heure et la batterie, et seul son CONTENU (compteurs,
   scores) descend juste sous l'encoche. Sans ça, l'heure s'affichait par-dessus
   « 71 311 FICHES JOUEURS ».
   Pas de risque d'écrasement : le ticker n'a qu'un min-height (56px), la
   réserve s'ajoute à sa hauteur au lieu de rogner son contenu.
   Spécificité : itsrugby-home.css déclare `.its-v2 nav.scores-ticker{padding:0}`,
   d'où le préfixe html.is-app qui passe devant. */
html.is-app .its-v2 nav.scores-ticker,
html.is-app nav.scores-ticker {
	padding-top: env(safe-area-inset-top, 0px);
}

/* Même principe pour les autres types de page : c'est le PREMIER BLOC porteur
   de fond qui s'étire derrière l'heure (mesuré le 16/09 sur 13 types de page,
   en 390 px, mode app). On passe par une bordure de la même couleur que le
   fond plutôt que par le padding : ces blocs ont des paddings différents selon
   la feuille (common/team/bar/espace…), la bordure s'ajoute sans y toucher.
   Visuellement identique : même teal, contenu décalé d'exactement l'encoche.

   • Fil d'Ariane teal — archives Matchs/Compétitions/Équipes/Joueurs, fiches
     match/équipe/compétition/joueur, recherche. Les ARTICLES sont exclus : leur
     fil d'Ariane est en absolute par-dessus la photo et gère déjà l'encoche
     (itsrugby-article.css). Remplace le liseré 1px (séparateur d'avec le header,
     masqué en app) posé par team/bar/espace.css. */
html.is-app body:not(.single-post) nav.breadcrumb {
	border-top: env(safe-area-inset-top, 0px) solid var(--itsclt-teal, #1C3D34);
}

/* • Barre Retour fabriquée par app-shell.js — pages sans fil d'Ariane (Pronos,
     Aide, pages légales). Jamais présente en même temps qu'un fil d'Ariane. */
html.is-app .its-app-topbar {
	border-top: env(safe-area-inset-top, 0px) solid var(--itsclt-teal, #1C3D34);
}

/* • Hub « Compte » (/plus/) : aucun bloc de fond en tête, le titre est posé sur
     le beige et l'heure (blanche) y serait illisible. Page courte : une bande
     teal en tête y fait office de barre, comme partout ailleurs. */
html.is-app body:has(.its-app-hub) {
	border-top: env(safe-area-inset-top, 0px) solid var(--itsclt-teal, #1C3D34);
}
/* Le titre du hub démarre pile au bord de la bande (mesuré : 46 px pour une
   encoche de 47) : un peu d'air pour qu'il ne colle pas au teal. */
html.is-app body:has(.its-app-hub) #main-content {
	padding-top: 14px;
}

/* Éléments COLLANTS au haut de l'écran : à top:0 ils se fixaient sous l'heure
   pendant le défilement. On les fait coller juste sous l'encoche.
   (Les sticky internes à une liste — .its-rows__group, .nav-dropdown-sep —
   collent à leur conteneur, pas à l'écran : non concernés.) */
html.is-app .nav-interne,
html.is-app .its-stickybar,
html.is-app.its-app-espace-section .its-app-espace-back {
	top: env(safe-area-inset-top, 0px);
}

/* La barre de progression est fixe elle aussi, donc déjà sous l'horloge :
   `top: 0` la place pile en dessous, où elle doit être. */
html.is-app .its-app-progress {
	top: 0;
}

/* ── Bouton « Retour » (app uniquement) ─────────────────────────────────────
   Le header du site est masqué en app et iOS n'active pas le geste de retour
   au bord de l'écran (allowsBackForwardNavigationGestures) : depuis une fiche
   joueur ouverte via la compo d'un match, il n'y avait aucun moyen de revenir
   à la feuille de match. Affiché seulement quand app-shell.js a vérifié qu'il
   y a un historique et qu'on n'est pas sur une racine d'onglet — et le JS ne
   retire l'attribut `hidden` qu'en mode app (cf. commentaire côté PHP : c'est
   ce qui protège le web quand le used-css est antérieur à cet ajout).
   Habillage repris de la barre de nav des articles (itsrugby-article.css,
   `.bc-cat`) : pastille carrée 36×36 translucide, bordure vanilla à 18 %,
   chevron vert flash. Le libellé « Retour » reste dans le DOM pour les
   lecteurs d'écran mais passe en font-size:0, comme là-bas. */
.its-app-back {
	display: none;
}

html.is-app .its-app-back.is-ready {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	font-size: 0; /* masque « Retour » à l'œil, pas aux lecteurs d'écran */
	background: rgba(242, 229, 210, 0.12);
	border: 1px solid rgba(242, 229, 210, 0.18);
	color: var(--g-bright, #8ED968);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* supprime le délai de tap ~300 ms → clic instantané */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

html.is-app .its-app-back.is-ready:active {
	background: rgba(242, 229, 210, 0.2);
}

/* Couleur portée aussi par l'icône : sur les pages où .its-v2 englobe le
   footer, la charte force color:inherit sur certains descendants (même piège
   que les onglets et la bannière promo). */
html.is-app .its-app-back .its-app-back-ico {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--g-bright, #8ED968);
}

/* Le bouton vit toujours dans une barre : soit le fil d'Ariane de la page, soit
   celle que le JS fabrique quand il n'y en a pas. Donc dans le flux, jamais
   par-dessus le contenu — et l'alignement suit la gouttière du conteneur,
   comme les pastilles des articles. Le `position: fixed` de repli n'existe
   plus : le style de la barre article est le style partout (arbitrage Félix
   11/08, un fond noir opaque avait été refusé). */
html.is-app .breadcrumb.has-app-back .container {
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
}

/* Barre allégée, même logique que sur les articles : la racine « It's Rugby »
   est déjà l'onglet Accueil de la barre du bas, et les séparateurs n'ont plus
   rien à séparer. Le titre courant ne disparaît QUE s'il reste un libellé de
   section derrière (fiches → « ‹ Joueurs », le titre est repris en H1 juste
   dessous) ; sur une page à un seul niveau il devient le titre de la barre
   (« ‹ Carte des clubs »), sinon elle serait vide. */
html.is-app .breadcrumb.has-app-back .container > a:first-of-type,
html.is-app .breadcrumb.has-app-back .container > span[aria-hidden="true"],
html.is-app .breadcrumb.has-app-back .container > a ~ a ~ [aria-current="page"] {
	display: none;
}

html.is-app .breadcrumb.has-app-back .container > [aria-current="page"] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Barre fabriquée par le JS pour les pages sans fil d'Ariane (/pronos/,
   /aide/, pages légales…) : mêmes cotes et même fond que le fil d'Ariane du
   site, pour qu'aucune page ne détonne. Injectée côté client → app only, et à
   safelister RUCSS (invisible à la génération). */
html.is-app .its-app-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--itsclt-teal, #1C3D34);
	white-space: nowrap;
	overflow: hidden;
}

html.is-app .its-app-topbar-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: rgba(242, 229, 210, 0.75);
	font-size: 12px;
}