@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* 0. RESET */
* {
  box-sizing: border-box;
  margin: 0; padding: 0;
  outline: none;
}
button, input, select, textarea {
  background: unset;
  border: unset;
  color: unset;
}

/* 1. FONT & ICONS */
* {
  font-family: JetBrains Mono;
}
html {
    font-size: 16px;
  --icon-size: 25px;
   --tap-size: 25px;
}

/* 2. THEMES AND COLORS */
:root {
  --color-bg: #fff;
  --color-fg: #000;
  --accent: #ff4081;
}
html[data-theme="light"] {
  --color-bg: #fff;
  --color-fg: #000;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --hr: #AAA;
  --accent: #ff4081;
}
html[data-theme="dark"] {
  --color-bg: #222;
  --color-fg: #eee;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --hr: #555A;
  --accent: #ff4081;
}
html[data-theme="oled"] {
  --color-bg: black;
  --color-fg: #D0D0D0;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --hr: #222A;
  --accent: #ff4081;
}
html[data-theme="dark-hsl"] {
  --h: 300;
  --s: 100;
  --l:  10;
  --hsl: hsl( 300 100% 10%);
  --hsl: hsl( var(--h) calc( var(--s) * 1% ) calc( var(--l) * 1% ) );
  --color-bg: var(--hsl);
  --color-fg: #eee;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --hr: color-mix(in hsl, var(--bg) 90%, #AAA);
  --accent: #ff4081;
}


h1, h2, h3, h4, h5, h6 { color: var(--accent-opa-50, currentcolor); }

/* 3. LAYOUT */

:root {
  --gap:   10px;
  --gap-s:  5px;
  --gap-l: 20px;
}

/*--------- FIX: that weird mobile browser glitch ---------*/
.app-container {
     inline-size: 100%;      /* statt 100vw */
      block-size: 100vh;     /* alter Fallback */
  min-block-size: 100svh;    /* sicher mit sichtbarer Leiste */
  max-block-size: 100lvh;    /* wenn Leiste weg ist */
  overflow: clip;            /* meist besser als hidden */
  display: flex;
  flex-direction: column-reverse;
} /* 1st: fallback */
@supports (height: 100dvh) {
  .app-container {
        block-size: 100dvh;
    min-block-size: 100dvh;
    max-block-size: 100dvh;
  }
} /* 2nd: modern appproach */
.app-container { overflow: hidden; }
.workspace { min-block-size: 0; }
/*---------------------------------------------------------*/

.app-container {
  display: flex; flex-direction: column-reverse;
}

/* 4. Text & Headlines  */

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: bold;
}

h1 { font-size: 20px; }

.headline { font-size: 20px; }

i {
  font-size: 10px;
  opacity: 0.50;
  hyphens: auto;
  text-align: justify;
  text-wrap: pretty;
  /* word-break: break-all; */
}


/* 5. DETAILS --- radius, shadows etc.  */

:root {
  --radius: 0px;
}
.cmd,
.commands, .commands .fav,
.search-input {
  border-radius: var(--radius);
}
  
/* 6. FUCK TAILWIND --- some helpful util classes */

.col, .colbox, .flxc, .flxcol, .flex-column { display: flex; flex-direction: column;  }
.row, .rowbox, .flxr, .flxrow, .flex-row    { display: flex; flex-direction: row; align-items: center; }

.grid { display: grid; }

.abs, .absolute { position: absolute; }
.fix, .fixed    { position: fixed; }
.fix0, .fixed   { position: fixed; inset: 0; }
.rel, .relative { position: relative; }
.sticky         { position: sticky; }

/* 
.block / .iblock

.blk / .iblk
.flx / .iflx / .grid
.flxc / .flxr
*/

.gap   { gap: var(--gap);   }
.gap-l { gap: var(--gap-l); }
.gap-s { gap: var(--gap-s); }
.nogap { gap: 0; }
.ungap { gap: unset; }

.pad,   .padding   { padding: var(--gap); }
.pad-l, .padding-l { padding: var(--gap-l); }
.pad-s, .padding-s { padding: var(--gap-s); }

:root {
  --fs-tiny    : 10px;
  --fs-small   : 12px;
  --fs-default : 16px;
  --fs-large   : 20px;
  --fs-huge    : 30px;
}

.fs-tiny    { font-size: var(--fs-tiny   ); }
.fs-small   { font-size: var(--fs-small  ); }
.fs-default { font-size: var(--fs-default); }
.fs-large   { font-size: var(--fs-large  ); }
.fs-huge    { font-size: var(--fs-huge   ); }

/* WORK IN PROGRESS: DYNAMIC COLOR VARIABLES */

html {
  --l: 0;
  --c: 0;
  --h: 0;
  --color: oklch( var(--l) var(--c) var(--h) );
  --shade-dark-10: 
}
:root {
  --hue: 190;
  --saturation: 90%;
  --lightness:  40%;
  --color-hsl: hsl( var(--hue), var(--saturation), var(--lightness) );
}

.item {
  --item-border: 4px solid var(--fg);
  --item-radius: 10px;
  
  border        : var(--item-border);
  border-radius : var(--item-radius);
  
  content-visibility: auto;
}

[data-viewmode*="grid"], .grid {
  --size      : attr(data-size px, 48px);
  --icon-size : var(--size);
  --item-size : calc(var(--size) + 10px + 10px);
  
  /*align-items: start;*/
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(var(--item-size), 1fr)); 
  gap: 1.5rem;
  
  .item {
    padding: 1rem; 
    text-align: center;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
  .item .wrap { font-size: var(--icon-size); display: block; line-height: 0; }
  .item .name { opacity: 0.50; display: none; }
}

.iconsets {
  display: flex; 
  flex-direction: column;
  gap: 1.5rem;
  
  .item { 
    padding: 1rem; 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 0;
    
    > div:nth-child(1) { flex: 0 0 auto; aspect-ratio: 1 / 1; }
    > div:nth-child(2) { flex: 1 0 auto; }
    > div:nth-child(3) { flex: 0 0 auto; }
  }
  
  .item .heart   { font-size: 50px; line-height: 0; }
  .item .name    { text-align: left; font-size: 30px; font-weight: bold; }
  .item .total   { text-align: left; }
  .item .samples { font-size: 32px; }
  
 

}

.heart.isFav,
.heart.is-fav,
.heart.isActive,
.heart.is-active { color: red!important; }

#iconset .heart { font-size: 100px; }

.navmenu     { display: flex; flex-direction: row; }
.navmenu > a { display: flex; flex-direction: column; align-items: center; flex: 1 0 auto; padding: 1.5rem; }
.navmenu :is(.icon, iconify-icon) { font-size: 48px; }

#welcome {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  
}

/* RESET */

/* LAYOUT */

.name {
  text-wrap: pretty;
}

body  { display: flex; flex-direction: column; min-height: 100vh; }
#app  { display: flex; flex-direction: column; min-height: 100vh; }
main  { flex: 1 0 auto; }
aside { flex: 0 1 auto; }

main { display: flex; flex-direction: column; align-content: center; justify-content: center; gap: 3rem; }

main { padding: 1.5rem; }

aside.bottom { position: sticky; bottom: 0; opacity: 0.98; }

#iconset {
  margin: 1.5rem;
  padding: 1.5rem;
  text-align: center;
  
  h2 { font-size: 20px; }
}

nav {
  display         : flex;
  justify-content : space-between;
  /*margin-bottom   : 3rem;*/
  text-transform  : uppercase;
  
  a       { opacity: 0.5; }
  a:hover { opacity: 1.0; }
}

/* COLORS */

:root {
  --bg : #131313;
  --fg : #C0C0C0;
  
  --separator: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
}

body, aside {
  background: var(--bg);
  color:      var(--fg);
}

a {
  color: var(--colorx, var(--fg));
  text-decoration: none;
}
a.is-current,
a.is-current-parent {
  color: red;
}

aside > *, footer { border-top: var(--separator); }
.navmenu > *:not(:first-child) { border-left: var(--separator); }


.svg-spinners--bars-scale-middle {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='2.8' height='12' x='1' y='6' fill='%23000'%3E%3Canimate attributeName='y' begin='SVGKWB9Ob0W.begin+0.4s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='6;1;6'/%3E%3Canimate attributeName='height' begin='SVGKWB9Ob0W.begin+0.4s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='12;22;12'/%3E%3C/rect%3E%3Crect width='2.8' height='12' x='5.8' y='6' fill='%23000'%3E%3Canimate attributeName='y' begin='SVGKWB9Ob0W.begin+0.2s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='6;1;6'/%3E%3Canimate attributeName='height' begin='SVGKWB9Ob0W.begin+0.2s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='12;22;12'/%3E%3C/rect%3E%3Crect width='2.8' height='12' x='10.6' y='6' fill='%23000'%3E%3Canimate id='SVGKWB9Ob0W' attributeName='y' begin='0;SVGCkSt6baQ.end-0.1s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='6;1;6'/%3E%3Canimate attributeName='height' begin='0;SVGCkSt6baQ.end-0.1s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='12;22;12'/%3E%3C/rect%3E%3Crect width='2.8' height='12' x='15.4' y='6' fill='%23000'%3E%3Canimate attributeName='y' begin='SVGKWB9Ob0W.begin+0.2s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='6;1;6'/%3E%3Canimate attributeName='height' begin='SVGKWB9Ob0W.begin+0.2s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='12;22;12'/%3E%3C/rect%3E%3Crect width='2.8' height='12' x='20.2' y='6' fill='%23000'%3E%3Canimate id='SVGCkSt6baQ' attributeName='y' begin='SVGKWB9Ob0W.begin+0.4s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='6;1;6'/%3E%3Canimate attributeName='height' begin='SVGKWB9Ob0W.begin+0.4s' calcMode='spline' dur='0.6s' keySplines='.14,.73,.34,1;.65,.26,.82,.45' values='12;22;12'/%3E%3C/rect%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

header {
  text-align: center;
}


.alphabet-index {
  background     : var(--bg);
  display        : flex;
  font-size      : 20px;
  text-transform : uppercase;
  position       : sticky;
  top            : 0;
  z-index        : 999;
  
  li { 
    flex: 1 0 auto;
    
    display         : flex;
    align-items     : center;
    justify-content : center;
    text-align      : center;
    padding         : 1.5rem 0;
  }
}

.hidden { display: none; }


footer {
  text-align: center; 
  padding: 1rem;
}
.search-area {
  box-shadow: 0 0 50px var(--bg);
  padding: 2rem; 
  text-align: center;
}
.search-area input { 
  width: 100%; max-width: 500px; 
  padding: 0.8rem; 
  border: 1px solid var(--fg); 
  border-radius: 8px; 
  font-size: 20px; 
}

/* In layout.latte <style>
[class^="icon--"], [class*=" icon--"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
*/