/* Charte PI (~/PI/Brand/tokens.json) en variables CSS, clair et sombre.
   Format : canaux r g b, à lire avec rgb(var(--pi-good)) ou rgb(var(--pi-good) / .3).
   Chargé après app.css : Tailwind n'est pas recompilé, les correctifs vivent ici. */
:root{
  --pi-bg:249 245 238;--pi-card:255 255 255;--pi-ink:26 26 26;--pi-ink-mute:85 85 85;
  --pi-border:216 207 187;--pi-grid:236 230 216;--pi-hover:239 231 214;
  --pi-accent:139 92 246;--pi-good:42 122 42;--pi-bad:179 74 31;--pi-warn:183 121 31;
  --pi-series-2:8 145 178;--pi-series-3:212 163 115;
  --pi-font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
  --pi-font-serif:"Source Serif 4",Georgia,Cambria,serif;
}
html.dark{
  --pi-bg:21 19 15;--pi-card:33 30 24;--pi-ink:236 231 218;--pi-ink-mute:177 168 146;
  --pi-border:58 53 43;--pi-grid:42 38 30;--pi-hover:42 38 30;
  --pi-good:76 184 106;--pi-bad:226 121 75;--pi-warn:224 176 74;
  --pi-series-2:45 183 214;--pi-series-3:224 185 143;
}


/* ===== 1. Mode sombre : classes de couleur employées qui n'avaient pas de surcharge html.dark =====
   Généré par un script qui croise les classes employées (templates, *.js) et les règles d'app.css.
   Même sélecteur qu'app.css préfixé html.dark (spécificité plus haute), valeurs via les variables --pi-*.
   !important seulement sur les états hover dont la règle de base sombre d'app.css est déjà !important.
   Les classes vues à la lecture seule, non employées, ne sont pas couvertes. */
html.dark .divide-sepia-border>:not([hidden])~:not([hidden]){border-color:rgb(var(--pi-border))}
html.dark .divide-sepia-border\/40>:not([hidden])~:not([hidden]){border-color:rgb(var(--pi-border) / .4)}
html.dark .border-bad{border-color:rgb(var(--pi-bad))}
html.dark .border-bad\/20{border-color:rgb(var(--pi-bad) / .2)}
html.dark .border-bad\/30{border-color:rgb(var(--pi-bad) / .3)}
html.dark .border-bad\/40{border-color:rgb(var(--pi-bad) / .4)}
html.dark .border-good{border-color:rgb(var(--pi-good))}
html.dark .border-good\/20{border-color:rgb(var(--pi-good) / .2)}
html.dark .border-good\/30{border-color:rgb(var(--pi-good) / .3)}
html.dark .border-good\/40{border-color:rgb(var(--pi-good) / .4)}
html.dark .border-ink{border-color:rgb(var(--pi-ink))}
html.dark .border-ink-mute{border-color:rgb(var(--pi-ink-mute))}
html.dark .border-sepia-border\/30{border-color:rgb(var(--pi-border) / .3)}
html.dark .border-sepia-border\/40{border-color:rgb(var(--pi-border) / .4)}
html.dark .border-sepia-border\/50{border-color:rgb(var(--pi-border) / .5)}
html.dark .border-sepia-border\/60{border-color:rgb(var(--pi-border) / .6)}
html.dark .border-sepia-card{border-color:rgb(var(--pi-card))}
html.dark .bg-bad{background-color:rgb(var(--pi-bad))}
html.dark .bg-bad\/10{background-color:rgb(var(--pi-bad) / .1)}
html.dark .bg-bad\/20{background-color:rgb(var(--pi-bad) / .2)}
html.dark .bg-bad\/40{background-color:rgb(var(--pi-bad) / .4)}
html.dark .bg-bad\/5{background-color:rgb(var(--pi-bad) / .05)}
html.dark .bg-bad\/60{background-color:rgb(var(--pi-bad) / .6)}
html.dark .bg-bad\/70{background-color:rgb(var(--pi-bad) / .7)}
html.dark .bg-good{background-color:rgb(var(--pi-good))}
html.dark .bg-good\/10{background-color:rgb(var(--pi-good) / .1)}
html.dark .bg-good\/20{background-color:rgb(var(--pi-good) / .2)}
html.dark .bg-good\/30{background-color:rgb(var(--pi-good) / .3)}
html.dark .bg-good\/40{background-color:rgb(var(--pi-good) / .4)}
html.dark .bg-good\/5{background-color:rgb(var(--pi-good) / .05)}
html.dark .bg-good\/60{background-color:rgb(var(--pi-good) / .6)}
html.dark .bg-good\/70{background-color:rgb(var(--pi-good) / .7)}
html.dark .bg-good\/\[0\.06\]{background-color:rgb(var(--pi-good) / .06)}
html.dark .bg-ink{background-color:rgb(var(--pi-ink))}
html.dark .bg-ink-mute{background-color:rgb(var(--pi-ink-mute))}
html.dark .bg-ink-mute\/40{background-color:rgb(var(--pi-ink-mute) / .4)}
html.dark .bg-ink\/10{background-color:rgb(var(--pi-ink) / .1)}
html.dark .bg-ink\/15{background-color:rgb(var(--pi-ink) / .15)}
html.dark .bg-ink\/25{background-color:rgb(var(--pi-ink) / .25)}
html.dark .bg-ink\/40{background-color:rgb(var(--pi-ink) / .4)}
html.dark .bg-ink\/60{background-color:rgb(var(--pi-ink) / .6)}
html.dark .bg-sepia-border{background-color:rgb(var(--pi-border))}
html.dark .bg-sepia-border\/40{background-color:rgb(var(--pi-border) / .4)}
html.dark .bg-white\/60{background-color:rgb(var(--pi-card) / .6)}
html.dark .bg-white\/80{background-color:rgb(var(--pi-card) / .8)}
html.dark .from-white\/10{--tw-gradient-from:rgb(var(--pi-card) / .1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--pi-card) / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
html.dark .via-white\/60{--tw-gradient-to:rgb(var(--pi-card) / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(var(--pi-card) / .6) var(--tw-gradient-via-position),var(--tw-gradient-to)}
html.dark .to-\[\#b34a1f\]{--tw-gradient-to:rgb(var(--pi-bad)) var(--tw-gradient-to-position)}
html.dark .to-white{--tw-gradient-to:rgb(var(--pi-card)) var(--tw-gradient-to-position)}
html.dark .to-white\/90{--tw-gradient-to:rgb(var(--pi-card) / .9) var(--tw-gradient-to-position)}
html.dark .text-ink-mute\/40{color:rgb(var(--pi-ink-mute) / .4)}
html.dark .text-ink-mute\/50{color:rgb(var(--pi-ink-mute) / .5)}
html.dark .text-ink-mute\/60{color:rgb(var(--pi-ink-mute) / .6)}
html.dark .text-ink-mute\/70{color:rgb(var(--pi-ink-mute) / .7)}
html.dark .text-ink-mute\/80{color:rgb(var(--pi-ink-mute) / .8)}
html.dark .text-sepia-border{color:rgb(var(--pi-border))}
html.dark .ring-sepia-border{--tw-ring-color:rgb(var(--pi-border))}
html.dark .placeholder\:text-ink-mute::-moz-placeholder{color:rgb(var(--pi-ink-mute))}
html.dark .placeholder\:text-ink-mute::placeholder{color:rgb(var(--pi-ink-mute))}
html.dark .after\:bg-white:after{background-color:rgb(var(--pi-card))}
html.dark .hover\:border-bad\/40:hover{border-color:rgb(var(--pi-bad) / .4)}
html.dark .hover\:border-good\/40:hover{border-color:rgb(var(--pi-good) / .4)}
html.dark .hover\:border-ink-mute:hover{border-color:rgb(var(--pi-ink-mute))}
html.dark .hover\:border-ink-mute\/40:hover{border-color:rgb(var(--pi-ink-mute) / .4)}
html.dark .hover\:text-bad:hover{color:rgb(var(--pi-bad))!important}
html.dark .hover\:text-ink:hover{color:rgb(var(--pi-ink))!important}
html.dark .bg-warn{background-color:rgb(var(--pi-warn))}
html.dark .bg-ink.text-white,html.dark .bg-ink-mute.text-white{color:rgb(var(--pi-bg))}

/* Classes employées dans des gabarits mais absentes d'app.css (sans effet jusqu'ici) : clair et sombre via variables. */
.divide-sepia-border\/60>:not([hidden])~:not([hidden]){border-color:rgb(var(--pi-border) / .6)}
.hover\:bg-sepia-soft:hover{background-color:rgb(var(--pi-hover))}
.hover\:bg-sepia-border:hover{background-color:rgb(var(--pi-border))}
.hover\:border-bad:hover{border-color:rgb(var(--pi-bad))}
.hover\:border-accent\/30:hover{border-color:rgb(var(--pi-accent) / .3)}
.text-white\/80{color:rgb(255 255 255 / .8)}
html.dark .hover\:bg-sepia-border:hover{background-color:rgb(var(--pi-border))!important}
html.dark .hover\:border-bad:hover{border-color:rgb(var(--pi-bad))!important}
html.dark .hover\:border-accent\/30:hover{border-color:rgb(var(--pi-accent) / .3)!important}

/* ===== 2. Titres : Source Serif 4, graisse 600 =====
   Le preflight Tailwind met font-weight:inherit sur h1-h6 (0,0,1) et les utilitaires font-bold / font-sans (0,1,0)
   le battent : on monte à (0,2,1). Exceptions : étiquettes en majuscules (.uppercase) et titres en mono. */
h1:not(.uppercase):not(.font-mono),h2:not(.uppercase):not(.font-mono),h3:not(.uppercase):not(.font-mono){
  font-family:var(--pi-font-serif);font-weight:600}
.font-serif.font-bold{font-weight:600}

/* ===== 3. Étiquette unique (petites majuscules au-dessus d'un chiffre, d'une colonne, d'un bloc) ===== */
.label{font-size:.7rem;text-transform:uppercase;font-weight:600;letter-spacing:.025em;color:rgb(var(--pi-ink-mute))}

/* ===== 4. Rayons de la charte : puce 6px, contrôle 8px (rounded-lg), carte 12px (rounded-xl) =====
   rounded (4px) et rounded-sm (2px) deviennent la puce, rounded-2xl (16px) devient la carte. */
.rounded{border-radius:6px}.rounded-sm{border-radius:6px}.rounded-2xl{border-radius:12px}

/* ===== 5. Composants : en-têtes de tableau et champs de formulaire =====
   En-tête de colonne unique : 0.7rem, graisse 600, interlettrage .025em, ink_mute. Le fond et la casse ne bougent pas
   (en-têtes collants, tickers, dates). :not(.pi-keep) monte la spécificité à (0,1,2) pour battre les utilitaires
   Tailwind et les règles de tableau maison (.ft-t th). Exceptions : un th qui porte lui-même text-accent / text-good /
   text-bad (état actif, colonne colorée), ou la classe .pi-keep. */
thead th:not(.pi-keep):not([class^="text-accent"]):not([class*=" text-accent"]):not([class^="text-good"]):not([class*=" text-good"]):not([class^="text-bad"]):not([class*=" text-bad"]){
  font-size:.7rem;font-weight:600;letter-spacing:.025em;color:rgb(var(--pi-ink-mute))}

/* Champ unique (input, select, textarea) : fond carte, bordure de la charte, rayon 8px. La taille du texte vient de la page
   (text-xs / text-sm posé sur le champ ou hérité), jamais d'ici. */
select.pi-field,input.pi-field,textarea.pi-field{
  background-color:rgb(var(--pi-card));border:1px solid rgb(var(--pi-border));border-radius:8px;
  color:rgb(var(--pi-ink));box-shadow:none}
select.pi-field:focus,input.pi-field:focus,textarea.pi-field:focus{border-color:rgb(var(--pi-accent));outline:none}

/* ===== 6. Teintes de la charte absentes d'app.css : warn en pastille, series_2 / series_3 en texte et en barre ===== */
.bg-warn\/10{background-color:rgb(var(--pi-warn) / .1)}
.bg-warn\/20{background-color:rgb(var(--pi-warn) / .2)}
.border-warn\/30{border-color:rgb(var(--pi-warn) / .3)}
.border-warn\/40{border-color:rgb(var(--pi-warn) / .4)}
.text-series-2{color:rgb(var(--pi-series-2))}
.text-series-3{color:rgb(var(--pi-series-3))}
.bg-series-2{background-color:rgb(var(--pi-series-2))}
.bg-series-3{background-color:rgb(var(--pi-series-3))}


/* ===== Menus et screeners pro (25/10/2026) =====
   Barre latérale gauche dès 1024 px, header fin, screeners en une barre d'outils, un seul style de
   tableau et de badge sur les pages membres. Couleurs : variables --pi-* seulement (clair et sombre). */

/* --- header : onglet actif, pastille de statut, panneaux (vue publique et < 1024 px) --- */
.nav-top{position:relative}
.nav-top.nav-on::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:-.7rem;height:2px;border-radius:2px;background:rgb(var(--pi-accent))}
.nav-chev svg{transition:transform .15s ease}
details[open]>summary .nav-chev svg{transform:rotate(180deg)}
.nav-panel{box-shadow:0 1px 2px rgb(var(--pi-ink) / .06),0 12px 32px -8px rgb(var(--pi-ink) / .18)}
.nav-sect{font-size:.66rem;letter-spacing:.09em;opacity:.75}
.nav-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:.5rem;background:rgb(var(--pi-accent) / .1);color:rgb(var(--pi-accent))}
.nav-ico svg{width:1rem;height:1rem}
.nav-item:hover .nav-ico,.nav-item.is-on .nav-ico{background:rgb(var(--pi-accent));color:white}
.nav-foot{display:flex;align-items:center;justify-content:space-between;margin:.375rem .375rem 0;padding:.5rem .625rem .25rem;border-top:1px solid rgb(var(--pi-border));font-size:.75rem;color:rgb(var(--pi-ink-mute))}
.nav-foot kbd{font-size:.7rem;border:1px solid rgb(var(--pi-border));border-radius:.25rem;padding:.05rem .3rem;line-height:1.2}
.status-chip{padding:.25rem .6rem;border:1px solid rgb(var(--pi-border));border-radius:999px}
.status-chip:not(:has(> *:not(:empty))){display:none}
@media (max-width:1535px){.status-chip #mkt-status{display:none!important}}
.ptab{border-radius:.5rem .5rem 0 0;transition:background .12s,color .12s}
.ptab:hover{background:rgb(var(--pi-hover))}

/* --- rail mobile des screeners : Find compact, pas de Pop out --- */
.rail-find{position:relative}
.rail-find-btn{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);padding:.35rem;border-radius:.375rem}
.rail-popout{display:none}

/* --- barre latérale --- */
.side-nav{display:none}
@media (min-width:1024px){
  body.has-side{padding-left:15rem}
  .side-nav{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:15rem;z-index:45;background:rgb(var(--pi-hover) / .45);border-right:1px solid rgb(var(--pi-border))}
  body.has-side > header nav[aria-label="Primary"],body.has-side > header a[href="/today"].shrink-0{display:none!important}
  body.has-side > header > div.max-w-6xl,body.has-side > main:not([style]),body.has-side > footer{max-width:100rem}
  body.has-side > header .ml-auto{margin-left:0;flex:1}
  body.has-side > header form[role=search]{order:-1;flex:1;max-width:34rem;margin-right:auto;padding-top:.45rem;padding-bottom:.45rem}
  body.has-side > header form[role=search] input,body.has-side > header form[role=search] input:focus{width:100%}
  body.has-side .lg\:grid-cols-12 > aside.lg\:col-span-2{display:none}
  body.has-side .lg\:grid-cols-12 > aside.lg\:col-span-2 ~ .lg\:col-span-10{grid-column:1/-1}
  body.has-side .admin-float{display:none}
  /* the chart workspace is fixed to the window: it starts where the side bar ends */
  body.has-side #tv{left:15rem}
  body.has-side.side-mini #tv{left:4.25rem}
  body.has-side.side-mini{padding-left:4.25rem}
  body.side-mini .side-nav{width:4.25rem}
  body.side-mini .side-brand{justify-content:center;padding:0}
  body.side-mini .side-brand>span,body.side-mini .side-boards,body.side-mini .side-sub,body.side-mini .side-chev,body.side-mini .side-grp>span.flex-1,body.side-mini .side-tl,body.side-mini .side-admin{display:none!important}
  body.side-mini .side-grp{font-size:0;justify-content:center;gap:0;padding:.6rem 0}
  body.side-mini .side-toggle{justify-content:center;gap:0;margin:0 .4rem .4rem}
  body.side-mini .side-toggle .side-ico{transform:rotate(-90deg)}
}
.side-brand{display:flex;align-items:center;gap:.65rem;height:4rem;flex:none;padding:0 1rem;border-bottom:1px solid rgb(var(--pi-border));color:rgb(var(--pi-ink));font-size:.86rem}
.side-scroll{flex:1;overflow-y:auto;padding:.75rem .6rem 1.5rem;scrollbar-width:thin}
.side-grp{display:flex;align-items:center;gap:.7rem;padding:.55rem .65rem;margin-bottom:.15rem;border-radius:.6rem;font-size:.875rem;font-weight:600;color:rgb(var(--pi-ink) / .85);cursor:pointer;list-style:none;user-select:none;transition:background .12s,color .12s}
.side-grp::-webkit-details-marker{display:none}
.side-grp:hover,.side-a:hover,.side-fam-h:hover,.side-toggle:hover{background:rgb(var(--pi-hover));color:rgb(var(--pi-ink))}
.side-ico{flex:none;display:inline-flex;color:rgb(var(--pi-ink-mute) / .8)}
.side-ico svg{width:18px;height:18px}
.side-grp.is-on{background:rgb(var(--pi-accent));color:white}
.side-grp.is-on .side-ico{color:white}
.side-grp.is-in{color:rgb(var(--pi-ink))}
.side-grp.is-in .side-ico,.side-fam[open]>.side-fam-h .side-fico{color:rgb(var(--pi-accent))}
.side-chev{display:inline-flex;opacity:.5;transition:transform .15s;transform:rotate(-90deg)}
.side-sec[open] .side-chev,.side-fam[open] .side-chev{transform:none}
.side-sub{position:relative;margin:.1rem 0 .6rem 1.2rem;padding-left:.75rem;border-left:1px solid rgb(var(--pi-border))}
.side-a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.32rem .55rem;border-radius:.45rem;font-size:.82rem;color:rgb(var(--pi-ink-mute));transition:background .12s,color .12s}
.side-a.is-on{background:rgb(var(--pi-accent) / .12);color:rgb(var(--pi-accent));font-weight:600}
.side-a.is-on::before{content:"";position:absolute;left:calc(-.75rem - 1px);top:.3rem;bottom:.3rem;width:2px;border-radius:2px;background:rgb(var(--pi-accent))}
.side-h{margin:.7rem 0 .2rem;padding:0 .55rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgb(var(--pi-ink-mute) / .75)}
.side-n{flex:none;font-size:.7rem;font-weight:500;line-height:1;color:rgb(var(--pi-ink-mute) / .75);font-variant-numeric:tabular-nums}
.side-find{margin:.15rem 0 .35rem}
.side-find input{width:100%;font-size:.78rem;padding:.38rem .6rem;border-radius:.45rem;border:1px solid rgb(var(--pi-border));background:rgb(var(--pi-card));color:rgb(var(--pi-ink));outline:none}
.side-find input:focus{border-color:rgb(var(--pi-accent))}
.side-boards{margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgb(var(--pi-border))}
.side-fam>summary{list-style:none}
.side-fam>summary::-webkit-details-marker{display:none}
.side-fam-h{display:flex;align-items:center;gap:.55rem;margin:.1rem 0;padding:.4rem .55rem;border-radius:.5rem;font-size:.8rem;font-weight:600;color:rgb(var(--pi-ink) / .85);cursor:pointer;user-select:none}
.side-fico{display:inline-flex;color:rgb(var(--pi-ink-mute) / .8)}
.side-fico svg{width:15px;height:15px}
.side-fam-list{margin:.05rem 0 .35rem .95rem;padding-left:.55rem;border-left:1px solid rgb(var(--pi-border))}
.side-fam-list .side-a.is-on::before{left:calc(-.55rem - 1px)}
.side-dot{width:6px;height:6px;border-radius:999px;background:rgb(var(--pi-accent));flex:none}
.side-toggle{display:flex;align-items:center;gap:.7rem;margin:0 .6rem .4rem;padding:.45rem .65rem;border-radius:.6rem;font-size:.78rem;color:rgb(var(--pi-ink-mute));background:none;border:0;cursor:pointer;text-align:left}
.side-toggle .side-ico{transform:rotate(90deg)}
.side-admin{display:block;margin:.5rem .6rem .75rem;padding:.45rem .6rem;border-radius:.5rem;border:1px dashed rgb(var(--pi-border));font-size:.75rem;font-weight:600;color:rgb(var(--pi-ink-mute));text-align:center}
.side-admin.is-on{background:rgb(var(--pi-accent));border-color:rgb(var(--pi-accent));color:white}

/* --- screeners : en-tête, tableau, badges --- */
.board-count{padding-left:.25rem}
.board-hist svg path{stroke:rgb(var(--pi-ink-mute))!important}
.board-hist svg circle{fill:rgb(var(--pi-accent))!important}
.board-table td{padding-top:.28rem!important;padding-bottom:.28rem!important}
.board-table tbody tr{height:36px}
.board-table td svg[viewBox^="0 0 110"]{height:22px;width:96px}
.board-table td svg[viewBox^="0 0 110"] path{stroke:rgb(var(--pi-ink-mute))!important;opacity:.6}
.board-row{cursor:pointer}
.conv-bar{display:inline-block;width:2.25rem;height:3px;border-radius:3px;background:rgb(var(--pi-ink-mute) / .18);overflow:hidden}
.conv-bar>span{display:block;height:100%;background:rgb(var(--pi-accent));border-radius:3px}
.co-name{max-width:6rem}
@media (min-width:1280px){.co-name{max-width:10rem}}
.cc-in-cols #cc-menu > summary{display:none}
@media (min-width:1024px){
  .table-scroll:has(> .board-table){max-height:none!important;overflow:visible!important;position:static!important}
  .table-scroll:has(> .board-table) thead th{top:4rem!important}
}
.nbadge{display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap;font-size:.7rem;font-weight:600;line-height:1;padding:.18rem .35rem;border-radius:.3rem;border:1px solid rgb(var(--pi-border));color:rgb(var(--pi-ink-mute));background:transparent}
.nbadge.bg-good\/10,.nbadge.bg-bad\/10,.nbadge.bg-warn\/10,.nbadge.bg-accent\/10,.nbadge.bg-sepia-hover{background:transparent!important}

/* --- toutes les pages membres : même tableau, même pastille --- */
body.has-side main table thead th{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:rgb(var(--pi-ink-mute))}
body.has-side main table tbody td{padding-top:.3rem;padding-bottom:.3rem;font-variant-numeric:tabular-nums}
body.has-side main table tbody tr{height:36px}
body.has-side main table tbody tr:hover>td{background-color:rgb(var(--pi-hover) / .5)}
body.has-side main span[class*="rounded"][class*="px-"][class*="bg-good/10"],
body.has-side main span[class*="rounded"][class*="px-"][class*="bg-bad/10"],
body.has-side main span[class*="rounded"][class*="px-"][class*="bg-warn/10"],
body.has-side main span[class*="rounded"][class*="px-"][class*="bg-accent/10"]{background:transparent!important;border:1px solid rgb(var(--pi-border))!important;border-radius:.3rem!important;font-size:.7rem;font-weight:600;line-height:1;padding:.2rem .4rem!important}
@media (min-width:1280px) and (max-width:1679px){body.has-side:not(.side-mini) #board-signals .xl\:grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:640px){.sm\:whitespace-nowrap{white-space:nowrap}}