/* =====================================================================
   DESIGN SYSTEM CENTRAL — AL-APPS.CH
   Fichier maître. Source de vérité : AL-HUB/public/css/ui.css
   Propagé (copie, pas de lien live) vers AL-RH, AL-NDF, AL-FACTU via
   scripts/sync-ui-css.sh — ne jamais éditer les copies locales
   directement, éditer uniquement ce fichier puis relancer le script.
   Base : ui.css d'AL-RH (app la plus complexe), complété avec les
   composants qu'AL-FACTU et AL-HUB avaient ajoutés de leur côté
   (badges, tuiles, titres de page) et qu'AL-RH utilise déjà dans ses
   propres vues sans les avoir jamais définis (al-card-title, al-badge,
   al-page-title, al-table-wrapper — vérifié par grep sur les vues RH).

   Migration charte graphique (23.07.2026) : --brand et --accent passent
   au terracotta (Phase 1 recommandée par le graphiste — les deux restent
   deux variables séparées et éditables depuis Admin > Apparence >
   Couleurs, juste réglées sur la même teinte ; fusion en une seule
   possible plus tard sans changement de structure). --accent devient
   aussi la base d'une gamme de tons (--accent-50 à 900) calculée
   automatiquement en CSS via color-mix() : changer --accent recalcule
   toute la gamme partout, sans jamais rien retoucher ailleurs. Seuls
   --accent-50/100/300/600(=base)/700/900 sont les points donnés par le
   graphiste ; 200/400/500/800 sont interpolés selon la même logique
   (à ajuster si besoin, ce ne sont pas des valeurs figées côté charte).
   Les anciens noms (--ink, --muted, --line, --card, --warn) restent les
   variables réellement stockées/éditables ; les nouveaux noms de la
   charte (--text, --text-muted, --border, --surface, --warning...) sont
   de simples alias dessus, pour ne rien casser dans les 4 apps tout en
   adoptant le vocabulaire de la charte pour la suite.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#F2EEE9; --ink:#1f2428; --muted:#6b7280; --card:#ffffff; --line:#e5e7eb;
  --brand:#94481F; --brand-ink:#ffffff; --accent:#94481F; --warn:#b45309; --danger:#b91c1c;
  --success:#16a34a;
  --radius:14px; --radius-sm:10px; --shadow:0 8px 24px rgba(0,0,0,.06);
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:24px; --sp-6:32px;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px;
  /* Sidebar (menu latéral sombre) — variante verticale du header, pour les apps
     qui ont besoin d'une navigation avec beaucoup d'items (ex: back-office
     AL-NDF). Valeurs par défaut = couleurs déjà en place sur AL-NDF. */
  --sidebar-bg:#0f3d3a; --sidebar-bg-hover:#134e4a; --sidebar-bg-active:#115e59;
  --sidebar-ink:#99f6e4; --sidebar-ink-subtle:#5eead4; --sidebar-ink-muted:#2dd4bf;

  /* --- Charte graphique 23.07.2026 : gamme accent dérivée d'un seul ton --- */
  --accent-50:  color-mix(in oklch, var(--accent) 8%,  white);
  --accent-100: color-mix(in oklch, var(--accent) 16%, white);
  --accent-200: color-mix(in oklch, var(--accent) 30%, white);
  --accent-300: color-mix(in oklch, var(--accent) 45%, white);
  --accent-400: color-mix(in oklch, var(--accent) 65%, white);
  --accent-500: color-mix(in oklch, var(--accent) 85%, white);
  --accent-600: var(--accent);
  --accent-700: color-mix(in oklch, var(--accent) 80%, black);
  --accent-800: color-mix(in oklch, var(--accent) 65%, black);
  --accent-900: color-mix(in oklch, var(--accent) 55%, black);

  /* --- Neutres : alias vers les variables existantes (rien de renommé en dur) --- */
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-2: var(--text-muted);
  --border: var(--line);
  --border-input: var(--border);
  --surface: var(--card);

  /* --- Statuts : alias + déclinaisons fond/texte dérivées, toujours 3 statuts --- */
  --warning: var(--warn);
  --success-bg: color-mix(in oklch, var(--success) 15%, white);
  --success-text: color-mix(in oklch, var(--success) 70%, black);
  --warning-bg: color-mix(in oklch, var(--warning) 15%, white);
  --warning-text: color-mix(in oklch, var(--warning) 70%, black);
  --danger-bg: color-mix(in oklch, var(--danger) 12%, white);
  --danger-text: color-mix(in oklch, var(--danger) 70%, black);

  /* --- Info (24.07.2026, ajouté pour la refonte des pages Guide → Centre
     d'aide) : jusqu'ici absent car aucun écran ne l'utilisait vraiment
     (cf. §9 de la charte, "n'ajouter que si un écran l'utilise réellement").
     Les callouts d'aide (notes bleues) sont le premier vrai usage — valeurs
     reprises telles quelles de la charte. --- */
  --info:#3A6EA5; --info-bg:#EBF1F8; --info-text:#2E567F;

  /* --- Géométrie & contrôles (nouveaux, sans équivalent avant) --- */
  --radius-card:10px; --radius-modal:14px; --radius-ctl:8px; --ctl-height:36px;
  --focus-ring:0 0 0 3px var(--accent-100);

  /* --- Typographie (nouveau : aucune police custom n'était chargée avant) --- */
  --font:'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.al-body{background:var(--bg);color:var(--ink);font:var(--fs-16)/1.5 var(--font)}
/* Reset global des boutons (24.07.2026) : un <button> garde son apparence
   système (fond en dégradé, bordure) tant que "appearance" n'est pas
   explicitement retiré — background/border seuls ne suffisent pas sur la
   plupart des navigateurs. De nombreuses vues utilisent des boutons "bruts"
   stylés en inline (Alpine :style dynamique) sans la classe .al-btn ; plutôt
   que de patcher chaque bouton un par un, ce reset couvre tous les boutons
   des 4 apps d'un coup, y compris ceux à venir. */
button{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:inherit}

/* Layouts de base */
.al-container{max-width:1180px;margin:0 auto;padding:0 var(--sp-4)}
.al-container.al-container-wide{max-width:1600px !important;padding-left:12px !important;padding-right:12px !important;}
.al-header,.al-footer{background:#fff;border-bottom:1px solid var(--line)}
.al-footer{border-top:1px solid var(--line);border-bottom:none}
.al-header .al-container,.al-footer .al-container{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.al-brand{font-weight:700}

/* Lockup module topbar (charte graphique §12, 24.07.2026) : icone du
   module sur un chip + nom en minuscules blanches, remplace le wordmark
   texte "AL-RH"/"AL-NDF"/"AL-FACTU". Un seul accent pour tous les modules
   (charte : "les modules se distinguent uniquement par leur logo, jamais
   par la couleur") -- le chip suit donc --accent-600, pas une teinte fixe
   par module. */
.al-module-lockup{display:inline-flex;align-items:center;text-decoration:none}
/* Le logo (icone + fond teinte + nom en minuscules) est une image composee
   unique fournie par Mathias, pas un icone + texte assembles ici -- pas de
   fond/texte ajoutes en CSS. height fixe + width:auto pour ne jamais
   deformer une image rectangulaire (le composant <x-icon> impose width=
   height pour un PNG, donc on force le ratio par CSS, qui l'emporte sur
   les attributs HTML). */
.al-module-lockup-icon{display:flex}
.al-module-lockup-icon svg,.al-module-lockup-icon img{height:32px;width:auto;display:block}
.al-hub-back{display:inline-flex;align-items:center;gap:3px;font-size:13.5px;font-weight:400;color:var(--text-muted);text-decoration:none;padding:4px 2px}
.al-hub-back:hover{color:var(--accent-600)}
.al-hub-back svg{display:block}
.al-brand-group{display:flex;align-items:center;gap:11px}
.al-brand-sep{width:1px;height:20px;background:var(--border)}
.al-nav{display:flex;gap:var(--sp-2)}
.al-nav.al-nav-layout{flex:1;display:flex;align-items:center}
.al-nav-center{flex:1;display:flex;justify-content:center;align-items:center;gap:16px}
.al-nav-right{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.al-link{color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:8px}
.al-link:hover{background:var(--line)}
/* Onglet actif : pastille accentuée (charte graphique 23.07.2026), au lieu
   d'un fond indigo codé en dur — l'accent signale la position, pas
   seulement les boutons. */
.al-link.active{background:var(--accent-50);color:var(--accent-700);border-radius:999px}
/* Lien de navigation topbar (charte graphique 24.07.2026) : classe dédiée et
   centralisée pour les liens du menu du haut (.al-nav), distincte de
   .al-link qui sert aussi ailleurs (liens "retour" en pages admin, etc.) où
   la taille ne doit pas changer. */
.al-nav-link{color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:8px;font-size:var(--fs-14)}
.al-nav-link:hover{background:var(--line)}
.al-nav-link.active{background:var(--accent-50);color:var(--accent-700);border-radius:999px}

/* Pastille de comptage sur un lien de menu (ex: "X en attente" dans le menu du
   haut) - un seul style partagé, quelle que soit l'app, plutôt qu'un style
   inline répété à chaque entrée de menu. */
.al-nav-link-badged{display:inline-flex;align-items:center;gap:4px}
.al-nav-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:700;line-height:1;flex-shrink:0}

/* Topbar : variante gauche / centre / droite */
.al-topbar-nav{display:flex;align-items:center;width:100%}
.al-topbar-left{flex:0 0 auto}
.al-topbar-right{flex:0 0 auto}
.al-topbar-center{flex:1;display:flex;justify-content:center;gap:16px}

/* Sidebar sombre (menu latéral vertical) — voir --sidebar-* dans :root,
   éditables depuis HUB > Admin > Apparence > Couleurs. */
.al-sidebar{background:var(--sidebar-bg);color:var(--sidebar-ink);display:flex;flex-direction:column;height:100%;border-right:1px solid var(--line)}
.al-sidebar-brand{padding:var(--sp-4) var(--sp-4);border-bottom:1px solid var(--sidebar-bg-hover);font-weight:700;font-size:var(--fs-18);color:#fff;text-decoration:none;display:block}
.al-sidebar-brand:hover{color:var(--sidebar-ink)}
.al-sidebar-nav{flex:1;padding:var(--sp-3) var(--sp-2);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.al-sidebar-link{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:var(--fs-14);color:var(--sidebar-ink);text-decoration:none;transition:.15s}
.al-sidebar-link:hover{background:var(--sidebar-bg-hover)}
.al-sidebar-link.active{background:var(--sidebar-bg-active);color:#fff}
.al-sidebar-link-badge{display:inline-flex;align-items:center;justify-content:center;background:#ef4444;color:#fff;font-size:11px;line-height:1;border-radius:999px;padding:2px 6px;flex-shrink:0}
.al-sidebar-section-label{padding:10px 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--sidebar-ink-muted)}
.al-sidebar-sub-link{color:var(--sidebar-ink-subtle)}
.al-sidebar-sub-link:hover{color:#fff}
.al-sidebar-footer{padding:var(--sp-3) var(--sp-3);border-top:1px solid var(--sidebar-bg-hover);display:flex;flex-direction:column;gap:2px}

.al-main{padding:var(--sp-5) 0}
.al-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.al-h1{margin:0;font-size:var(--fs-28)}
.al-sub{margin:4px 0 0 0;color:var(--muted)}
.al-toolbar{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* Titres de page (variante ajoutée par AL-FACTU, RH l'utilise aussi sans jamais l'avoir définie) */
.al-page-titles{display:grid;gap:2px}
.al-page-title{margin:0;font-size:var(--fs-28)}
.al-page-subtitle{margin:4px 0 0 0;color:var(--muted)}

/* Cartes et messages */
.al-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--sp-4);box-shadow:var(--shadow)}
.al-card-title{font-weight:600;font-size:var(--fs-18);margin:0 0 10px 0}
.al-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4)}
.grid{display:grid}
.al-alert{margin:var(--sp-3) 0;padding:var(--sp-3);border-radius:10px;border:1px solid var(--line)}
.al-alert.ok{background:var(--success-bg);border-color:var(--success)}
.al-alert.err{background:var(--danger-bg);border-color:var(--danger)}

/* Badges de statut (RH les utilise déjà — modificateurs réels : ok/warn/danger/info/neutral).
   Couleurs sorties en variables (charte 23.07.2026) : toujours 3 statuts pilotés
   (success/warn/danger), "info" reste hors périmètre tant qu'aucun écran ne l'utilise. */
.al-badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:var(--fs-12);font-weight:600;background:var(--line);color:var(--ink)}
.al-badge.ok,.al-badge.success{background:var(--success-bg);color:var(--success-text)}
.al-badge.warn{background:var(--warning-bg);color:var(--warning-text)}
.al-badge.danger{background:var(--danger-bg);color:var(--danger-text)}
.al-badge.info{background:#e0e7ff;color:#3730a3}
.al-badge.neutral{background:var(--line);color:var(--muted)}

/* ============================================================
   BOUTONS
   Le HTML des 4 apps mélange plusieurs conventions de nommage pour
   le même bouton (al-btn-primary / al-btn primary / al-btn outline /
   al-btn small...). On couvre toutes les variantes réellement
   trouvées par grep plutôt que d'en imposer une seule du jour au
   lendemain dans 200+ fichiers Blade.
   ============================================================ */
.al-btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:var(--radius-ctl);height:var(--ctl-height);padding:0 18px;font-size:var(--fs-14);cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.al-btn:hover{filter:brightness(0.98)}
.al-btn:focus-visible{outline:2px solid var(--accent-600);outline-offset:2px}

.al-btn.primary,.al-btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.al-btn.primary:hover,.al-btn-primary:hover{background:var(--accent-700);border-color:var(--accent-700)}
.al-btn.secondary,.al-btn-secondary,.al-btn.outline,.al-btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}
.al-btn.danger,.al-btn-danger{background:#fff;border-color:var(--danger);color:var(--danger)}
.al-btn.danger:hover,.al-btn-danger:hover{background:var(--danger-bg)}
.al-btn.ghost,.al-btn-ghost{background:transparent;border-color:transparent}
.al-btn.icon{font-size:20px;line-height:1;width:var(--ctl-height);height:var(--ctl-height);padding:0;display:inline-grid;place-items:center}
.al-btn.small,.al-btn-small,.al-btn.sm,.al-btn-sm{height:auto;padding:4px 8px;font-size:var(--fs-12)}

.al-input{width:100%;height:var(--ctl-height);padding:8px 10px;border:1px solid var(--border-input);border-radius:var(--radius-ctl);background:#fff;font-size:var(--fs-14)}
.al-input:focus{outline:2px solid var(--accent-600);outline-offset:1px;box-shadow:var(--focus-ring)}
.al-field{display:grid;gap:6px;margin-bottom:10px}
.al-label{color:var(--muted);font-size:var(--fs-14)}

/* Modales (formulaires) */
.al-modal{position:fixed;inset:0;display:none;overscroll-behavior:contain}
.al-modal[aria-hidden="false"]{display:block}
.al-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.al-modal-dialog{
  position:relative;
  margin:3vh auto;
  background:#fff;
  border-radius:var(--radius-modal);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  max-width:640px;
  max-height:90vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.al-modal-dialog.size-xs{max-width:360px}
.al-modal-dialog.size-sm{max-width:480px}
.al-modal-dialog.size-md{max-width:760px}
.al-modal-dialog.size-lg{max-width:820px}
.al-modal-dialog.size-xl{max-width:980px}
.al-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.al-form{padding:12px 14px}
.al-form-body{display:grid;gap:10px}
.al-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
body.no-scroll{overflow:hidden !important}

/* Annuaire (2 colonnes) */
.annuaire{
  display:grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap:var(--sp-4);
  align-items:start;
}
.annuaire-aside{
  display:grid;
  gap:var(--sp-3);
  position:sticky;
  top:18px;
  height:fit-content;
  min-width:320px;
}
.annuaire-main{
  display:grid;
  gap:var(--sp-3);
  min-width:0;
}
.al-filter{display:grid;gap:8px}
@media (max-width:980px){
  .annuaire{grid-template-columns:1fr}
  .annuaire-aside{position:static;min-width:0}
}

/* Liste annuaire */
.al-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:auto;
  max-height:calc(100vh - 220px);
  background:#fff;
}
.al-list a.al-list-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:inherit;
  transition:.15s;
}
.al-list a.al-list-item:hover{background:#fafafa}
.al-list a.al-list-item:last-child{border-bottom:0}
.al-list a.al-list-item.active{background:var(--accent-50);border-left:3px solid var(--accent-600)}
.al-list a.al-list-item > *{min-width:0}
.al-list-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-list-sub{color:var(--muted);font-size:var(--fs-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mise en page "menu léger + contenu" (ex: section Demandes d'AL-NDF) —
   même esprit que .annuaire (grille sidebar/contenu) mais sidebar plus
   étroite (al-card + al-list utilisé comme menu, pas comme liste de résultats).
   Espace entre le menu et le contenu volontairement large (x2.5 par rapport
   à l'espacement standard --sp-4) pour bien détacher visuellement les deux. */
.al-light-sidebar-layout{display:grid;grid-template-columns:220px 1fr;gap:calc(var(--sp-4) * 2.5);align-items:start}
@media (max-width:980px){
  .al-light-sidebar-layout{grid-template-columns:1fr}
}

/* Détail (fiche) — grille à 2 colonnes max */
.al-detail{display:grid;gap:var(--sp-3)}
.al-detail-header{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.al-detail-title{margin:0;font-size:var(--fs-22)}
.al-detail-sub{color:var(--muted)}
.al-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (max-width:980px){
  .al-detail-grid{grid-template-columns:1fr}
}

/* Cartouches label/valeur */
.al-meta{display:block;background:transparent;border:0;padding:0;margin:0}
.al-meta span{display:block;margin:0;color:var(--muted);font-size:var(--fs-14);line-height:1.1;white-space:normal;overflow:visible;text-overflow:clip}
.al-meta strong{display:block;margin:0;font-size:var(--fs-16);line-height:1.3;word-break:break-word;color:var(--ink);font-weight:400}
.al-meta strong *{white-space:inherit !important}

/* Utilitaires */
.al-row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.al-space{height:var(--sp-3)}
.al-muted{color:var(--muted)}

/* Grilles utilitaires */
.al-grid{display:grid;gap:var(--sp-4)}
.al-grid.two{grid-template-columns:repeat(2,1fr)}
.al-grid.three{grid-template-columns:repeat(3,1fr)}
/* Tuiles "Mes apps" du dashboard — largeur réduite de 30% (demande Mathias 23.07.2026) */
.al-grid.three.apps-grid{max-width:70%}
@media (max-width:980px){
  .al-grid.two,
  .al-grid.three{grid-template-columns:1fr}
  .al-grid.three.apps-grid{max-width:100%}
}

/* Meta panel — sections & rows compactes */
.al-meta-sections{display:flex;flex-direction:column;gap:var(--sp-4)}
.al-meta-section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--sp-4);box-shadow:var(--shadow)}
.al-meta-section > .al-meta-title{margin:0 0 var(--sp-3) 0;font-size:var(--fs-18);line-height:1.3}
.al-meta-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--sp-3) var(--sp-4)}
@media (max-width:980px){
  .al-meta-grid{grid-template-columns:1fr}
}
.al-meta-grid .meta-row,
.al-meta-grid .row.meta,
.al-meta-grid .field-static{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}

/* Tables */
.al-table-wrapper{overflow:auto}
.al-table{width:100%;border-collapse:separate}
.al-table th,
.al-table td{
  text-align:left;
  vertical-align:top;
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.al-table--fit td:first-child,
.al-table--fit th:first-child{width:1%}
.al-table--spaced{border-spacing:16px 8px}

/* Tuiles "Mes apps" / cartes cliquables du dashboard */
.al-tile{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:inherit}
.al-tile-icon{font-size:28px;line-height:1}
.al-tile-title{font-weight:600;color:var(--ink)}
.al-tile-sub{font-size:var(--fs-14);color:var(--muted)}
.al-tile.disabled{opacity:.45;cursor:not-allowed}

/* Actualités : liseré coloré à gauche */
.al-news{border-left:4px solid var(--accent-600)}
.al-news.warning{border-left-color:var(--warn)}
.al-news.success{border-left-color:var(--success)}

/* Sticky footer (pages vides) */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { margin-top: auto; }

/* État vide (listes/tableaux sans résultat) — remplace al-muted isolé,
   la classe al-empty orpheline, et les cartes ad hoc par app */
.al-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  padding:var(--sp-6) var(--sp-4);
  color:var(--muted);
  font-size:var(--fs-14);
}
.al-empty-icon{font-size:22px;line-height:1;opacity:.6}
.al-empty-text{color:var(--muted)}
.al-empty a{color:var(--accent-600)}