/* Lagos Life: status bar (owner 5d). Spec: site/navigation.html#status-bar
   Clock + mood word on the left (never truncated), music, wallet on the right. */
.ll-status-bar {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--status-bar-height); min-width: 0;
  padding: 0 var(--space-1-5) 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface-glass-panel); color: var(--ink); /* panel tier: the mood word is coloured text (QA 5d-44) */
  outline: 1px solid var(--border-glass); outline-offset: -1px;
  box-shadow: var(--shadow-glass);
}
.ll-status-bar__time { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ll-status-bar__time .ll-emoji { font-size: var(--icon-sm); line-height: 1; }
.ll-status-bar__spacer { flex: 1; min-width: 0; }
.ll-status-bar .ll-wallet { flex: none; }
/* Narrow: under 360px the music toggle moves to the overflow menu so the mood word keeps its slot. */
.ll-status-bar { container: ll-status / inline-size; }
@container ll-status (max-width: 359px) { .ll-status-bar__music { display: none; } }


/* QA: the solid twin from 5b's glass recipe (glass.css), since this component sets its own glass fill. */
@media (prefers-reduced-transparency: reduce) { .ll-status-bar { background: var(--paper); } }
html[data-transparency="reduced"] .ll-status-bar { background: var(--paper); }