/* tokens */
/* Feliz for the web.
   Component geometry and type are taken from the Android sources, not eyeballed:
     constants/Dimensions.kt      NavigationBarHeight 80, MiniPlayerHeight 64, MiniPlayerBottomSpacing 8,
                                  AppBarHeight 64, ListItemHeight 64, ListThumbnailSize 48,
                                  ListItemHorizontalPadding 8, ListThumbnailPadding 6,
                                  GridThumbnailHeight 128, AlbumThumbnailSize 144, ThumbnailCornerRadius 6
     ui/theme/Type.kt             the M3 type scale the app pins
     ui/component/Items.kt        ListItem + GridItem structure, radii, active states
     ui/component/NavigationTitle.kt   section header: titleLarge bold + onSurfaceVariant arrow
     ui/component/GenreChip.kt    surfaceContainer tonal chip, 10/2 padding, 14px accent icon
     ui/component/ChartRankCell.kt + ui/theme/ChartColors.kt   rank/movement cell and its colours
     ui/player/MiniPlayer.kt      64 tall, 32 radius, surfaceContainer, 1px outline@30%, art-as-play-button
   1dp is rendered as 1px. Colours are Material 3 tokens from /theme.css, generated from the app's seeds. */
:root{
  --nav-h:80px;          /* NavigationBarHeight */
  --mini-h:64px;         /* MiniPlayerHeight */
  --mini-gap:8px;        /* MiniPlayerBottomSpacing */
  --appbar-h:64px;       /* AppBarHeight */
  --row-h:64px;          /* ListItemHeight */
  --thumb:48px;          /* ListThumbnailSize */
  --thumb-pad:6px;       /* ListThumbnailPadding */
  --row-pad:8px;         /* ListItemHorizontalPadding */
  --grid-thumb:128px;    /* GridThumbnailHeight */
  --thumb-r:6px;         /* ThumbnailCornerRadius */
  --climb:#7FBF7F; --fall:#FF6B68;                 /* ChartColors.kt, dark */
  font-synthesis-weight:none;
}
/* ChartColors.kt, light */

html,body{margin:0;height:100%}
#main{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(var(--nav-h) + var(--mini-h) + var(--mini-gap) + 16px)}
/* ================= mini player (MiniPlayer.kt) ================= */
#player{
  position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--mini-gap));z-index:35;
  padding:0 12px;display:flex;justify-content:center;pointer-events:none;
  transform:translateY(160%);transition:transform var(--dur-nav) var(--ease-nav);
}
/* ================= bottom navigation (M3 NavigationBar) ================= */
#nav{
  position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);z-index:40;
  background:var(--md-surface-container);display:flex;align-items:center;justify-content:center;
  padding-bottom:env(safe-area-inset-bottom);
}