/* Layout: light paper ground, gradient hero with the search, then the
   popularity chart, the category filter and the shelves. Tone page replaces home. */
:root{
  /* light is the primary look */
  --paper:#F6F4F9;
  --paper-a:rgba(246,244,249,.82);
  --rgb-quiet:96,90,116;
  --card:#FFFFFF;
  --card-2:#FBFAFD;
  --line:rgba(26,20,40,.10);
  --line-2:rgba(26,20,40,.2);
  --ink:#1A1428;
  --ink-2:#605A74;
  --ink-3:#8E88A2;
  /* brand gradient, straight off the logo */
  --g1:#FF5247;
  --g2:#A855F7;
  --g3:#0EA5E9;
  /* one hue per genre, the activity-ring three first, then four to match */
  --c-h1:#E4005E; --rgb-h1:228,0,94;
  --c-h2:#5FA800; --rgb-h2:95,168,0;
  --c-h3:#00A79B; --rgb-h3:0,167,155;
  --c-h4:#E8720C; --rgb-h4:232,114,12;
  --c-h5:#8B3DE8; --rgb-h5:139,61,232;
  --c-h6:#0A7DD1; --rgb-h6:10,125,209;
  --c-h7:#C01A8E; --rgb-h7:192,26,142;
  --shadow-s:0 1px 2px rgba(26,20,40,.05), 0 2px 8px -4px rgba(26,20,40,.1);
  --shadow-m:0 2px 6px rgba(26,20,40,.05), 0 14px 32px -16px rgba(26,20,40,.25);
  --shadow-l:0 4px 12px rgba(26,20,40,.06), 0 28px 60px -24px rgba(26,20,40,.35);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15121D;--paper-a:rgba(21,18,29,.82);--rgb-quiet:164,157,186;--card:#1E1A29;--card-2:#241F31;
    --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);
    --ink:#F3F1F8;--ink-2:#A49DBA;--ink-3:#7A7391;
    --c-h1:#FF3D7F; --rgb-h1:255,61,127;
    --c-h2:#A6E831; --rgb-h2:166,232,49;
    --c-h3:#2BE3D6; --rgb-h3:43,227,214;
    --c-h4:#FF9F45; --rgb-h4:255,159,69;
    --c-h5:#C07BFF; --rgb-h5:192,123,255;
    --c-h6:#4CC2FF; --rgb-h6:76,194,255;
    --c-h7:#FF6AD5; --rgb-h7:255,106,213;
    --shadow-s:0 1px 2px rgba(0,0,0,.4);
    --shadow-m:0 2px 6px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.8);
    --shadow-l:0 4px 12px rgba(0,0,0,.5), 0 28px 60px -24px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15121D;--paper-a:rgba(21,18,29,.82);--rgb-quiet:164,157,186;--card:#1E1A29;--card-2:#241F31;
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);
  --ink:#F3F1F8;--ink-2:#A49DBA;--ink-3:#7A7391;
  --c-h1:#FF3D7F; --rgb-h1:255,61,127;
  --c-h2:#A6E831; --rgb-h2:166,232,49;
  --c-h3:#2BE3D6; --rgb-h3:43,227,214;
  --c-h4:#FF9F45; --rgb-h4:255,159,69;
  --c-h5:#C07BFF; --rgb-h5:192,123,255;
  --c-h6:#4CC2FF; --rgb-h6:76,194,255;
  --c-h7:#FF6AD5; --rgb-h7:255,106,213;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 2px 6px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.8);
  --shadow-l:0 4px 12px rgba(0,0,0,.5), 0 28px 60px -24px rgba(0,0,0,.9);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.45;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
mark{background:none;color:var(--ink);font-weight:680}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
:focus-visible{outline:2.5px solid var(--g2);outline-offset:3px;border-radius:12px}
main{position:relative;z-index:1;overflow-x:clip}
.wrap{max-width:1060px;margin:0 auto;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px))}

/* ------------------------------------------------------------------- hero */
.hero-band{position:relative;isolation:isolate;z-index:5}

/* Het slanke balkje. De kop zelf blijft in de pagina staan en scrolt gewoon
   weg; dit balkje schuift erover zodra de kop bijna uit beeld is. Er wordt
   nergens ruimte gereserveerd, dus er valt ook geen gat. */
.minibar{position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--paper-a);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:var(--shadow-s);
  transform:translateY(-101%);opacity:0;visibility:hidden;
  transition:transform .3s var(--ease), opacity .24s var(--ease), visibility 0s .3s}
body.mini .minibar{transform:none;opacity:1;visibility:visible;transition-delay:0s}
.minitop{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;
  padding-block:9px 0}
.logo.mini{font-size:clamp(18px,4.4vw,22px);line-height:1.2}
.minibar .searchwrap{width:100%}
.minibar .field{padding-block:7px;border-radius:14px}
.minibar .kbd{display:none}
.minibar #minicats{padding-block:8px 9px}
.minibar .pills{gap:7px;justify-content:flex-start}
.minibar .pill{padding:6px 12px;font-size:12.5px;gap:6px;box-shadow:none}
.minibar .pill .dot{width:7px;height:7px;box-shadow:0 0 0 2px rgba(var(--rrgb),.16)}
@media (max-width:520px){
  .minibar #minicats{margin-inline:-18px;padding-inline:18px;overflow-x:auto;
    overscroll-behavior-x:contain;scrollbar-width:none}
  .minibar #minicats::-webkit-scrollbar{display:none}
  .minibar .pills{flex-wrap:nowrap;width:max-content}
}
/* een schap dat in beeld gezet wordt mag niet onder het balkje duiken */
.shelf{scroll-margin-top:136px}
.wash{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.wash::before{
  content:"";position:absolute;inset:-55% -14% auto -14%;height:165%;
  background:
    radial-gradient(42% 58% at 10% 4%,  rgba(255,82,71,.95), transparent 62%),
    radial-gradient(46% 62% at 88% 8%,  rgba(14,165,233,.9), transparent 64%),
    radial-gradient(52% 58% at 46% 86%, rgba(168,85,247,.92), transparent 66%),
    radial-gradient(34% 44% at 72% 58%, rgba(255,193,61,.6), transparent 66%);
  filter:saturate(1.3);
}
.wash::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(246,244,249,.34) 0%, rgba(246,244,249,.76) 62%, var(--paper) 100%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wash::after{
    background:linear-gradient(180deg, rgba(21,18,29,.3) 0%, rgba(21,18,29,.74) 60%, var(--paper) 100%)}
}
:root[data-theme="dark"] .wash::after{
  background:linear-gradient(180deg, rgba(21,18,29,.3) 0%, rgba(21,18,29,.74) 60%, var(--paper) 100%)}

.top{padding-block:clamp(40px,10vh,88px) 36px;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.6vh,30px);text-align:center;position:relative}
.logo{margin:0;font-size:clamp(42px,11.5vw,84px);line-height:1.1;font-weight:760;letter-spacing:-.04em;
  /* de negatieve letterafstand geldt ook na de laatste letter en krimpt het
     vak, waardoor background-clip de s afsnijdt: rechts wat lucht erbij */
  padding-block:.03em .1em;
  padding-inline:.02em .09em;
  background:linear-gradient(104deg,var(--g1) 4%,var(--g2) 48%,var(--g3) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(168,85,247,.3))}

/* ----------------------------------------------------------------- search */
/* het slot erft de breedte, anders krimpt de zoekbalk mee met zijn inhoud */
#slot-hero{width:min(600px,100%)}
#slot-hero .searchwrap{width:100%}
.searchwrap{position:relative;width:min(600px,100%);z-index:30}
.field{display:flex;align-items:center;gap:11px;padding:0 7px 0 18px;height:62px;border-radius:19px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-l);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease)}
.searchwrap:focus-within .field{transform:translateY(-1px);
  box-shadow:var(--shadow-l), 0 0 0 4px rgba(168,85,247,.16)}
.field::after{content:"";position:absolute;left:18px;right:18px;bottom:-2px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));opacity:.8;z-index:-1}
.field svg.mag{width:21px;height:21px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round}
#q{flex:1;min-width:0;border:0;background:none;color:var(--ink);font-family:var(--font);
  font-size:17.5px;letter-spacing:-.012em;padding:0;height:100%}
#q::placeholder{color:var(--ink-3)}
#q:focus{outline:none}
#q::-webkit-search-cancel-button,#q::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.xbtn{width:32px;height:32px;border-radius:50%;background:var(--card-2);border:1px solid var(--line);
  display:grid;place-items:center;flex:none;margin-right:4px;transition:transform .12s var(--ease)}
.xbtn:active{transform:scale(.86)}
.xbtn svg{width:13px;height:13px;stroke:var(--ink-2);stroke-width:2.4;stroke-linecap:round;fill:none}
.kbd{flex:none;margin-right:10px;font-size:12.5px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:7px;padding:3px 8px}

#panel{position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:19px;overflow:hidden;
  box-shadow:var(--shadow-l);transform-origin:50% 0;text-align:left}
#results{max-height:min(56vh,440px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#empty{padding:24px 18px;color:var(--ink-2);font-size:15px;margin:0}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;
  border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px;background:var(--card-2)}

/* ------------------------------------------------------------------- rows */
.row{display:flex;align-items:center;gap:13px;padding:10px 14px;position:relative;
  border-bottom:1px solid var(--line);transition:background .14s var(--ease)}
.row:last-child{border-bottom:0}
.row::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3.5px;border-radius:0 4px 4px 0;
  background:var(--rc);opacity:0;transition:opacity .15s var(--ease)}
.row.on::before,.row:active::before{opacity:1}
.row.on,.row:active{background:rgba(var(--rrgb),.08)}
@media (hover:hover) and (pointer:fine){
  .row:hover{background:rgba(var(--rrgb),.07)} .row:hover::before{opacity:.8}
}
.thumb{width:46px;height:46px;border-radius:12px;flex:none;object-fit:cover;background:var(--card-2);
  box-shadow:0 0 0 1px var(--line) inset, var(--shadow-s)}
.rtext{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.rtitle{font-size:15.5px;font-weight:530;letter-spacing:-.014em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--ink-2)}
.row mark{color:var(--ink)}
.rows .rtitle,.rel .rtitle{color:var(--ink)}
.rsub{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rc);border:1px solid rgba(var(--rrgb),.32);background:rgba(var(--rrgb),.1);
  border-radius:999px;padding:4px 10px}

/* ------------------------------------------------------------ play button */
.pbtn{position:relative;flex:none;width:38px;height:38px;border-radius:50%;
  background:rgba(var(--rrgb),.12);border:1.5px solid rgba(var(--rrgb),.35);
  display:grid;place-items:center;transition:transform .12s var(--ease), background .16s var(--ease)}
.pbtn:active{transform:scale(.88)}
@media (hover:hover) and (pointer:fine){ .pbtn:hover{background:rgba(var(--rrgb),.22)} }
.pbtn svg{width:17px;height:17px;fill:var(--rc);grid-area:1/1;transition:opacity .13s var(--ease), transform .2s var(--ease)}
.pbtn .i-stop{opacity:0;transform:scale(.55)}
.pbtn[data-playing="1"]{background:var(--rc);border-color:var(--rc);box-shadow:0 0 0 5px rgba(var(--rrgb),.16)}
.pbtn[data-playing="1"] svg{fill:#fff}
.pbtn[data-playing="1"] .i-play{opacity:0;transform:scale(.55)}
.pbtn[data-playing="1"] .i-stop{opacity:1;transform:none}
.pbtn[data-playing="1"]::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(var(--rrgb),.5);animation:pulse 1.5s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.32);opacity:0}}
.pbtn.big{width:60px;height:60px;box-shadow:0 10px 26px -8px rgba(var(--rrgb),.6)}
.pbtn.big svg{width:25px;height:25px}
.pbtn.on-art{position:absolute;right:7px;bottom:7px;width:34px;height:34px;
  background:rgba(255,255,255,.9);border-color:rgba(var(--rrgb),.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-m)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pbtn.on-art{background:rgba(30,26,41,.88)}
  :root:not([data-theme="light"]) .pbtn[data-playing="1"] svg{fill:#15121D}
}
:root[data-theme="dark"] .pbtn.on-art{background:rgba(30,26,41,.88)}
:root[data-theme="dark"] .pbtn[data-playing="1"] svg{fill:#15121D}

/* ------------------------------------------------------------------ feed */
#shelves{padding-block:14px 64px;display:flex;flex-direction:column;gap:28px}

/* ------------------------------------------------------------------ chart */
.chart{border-radius:26px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-l);overflow:hidden;position:relative;
  /* let op: margin-inline:auto zet in een flexkolom het uitrekken uit en laat
     de kaart op een telefoon buiten het scherm lopen; align-self doet dat niet */
  width:100%;max-width:620px;align-self:center}
.chead{padding:24px 22px 18px;position:relative;
  background:linear-gradient(118deg, rgba(255,82,71,.14), rgba(168,85,247,.14) 48%, rgba(14,165,233,.14))}
.chead h2{margin:0 0 4px;font-size:clamp(21px,4.6vw,28px);font-weight:740;letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--g1),var(--g2) 52%,var(--g3));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.02em .06em}
.chead p{margin:0;font-size:14px;color:var(--ink-2);max-width:52ch}
.clist{display:flex;flex-direction:column}
.crow{display:flex;align-items:center;gap:13px;padding:11px 20px 11px 14px;border-top:1px solid var(--line);
  transition:background .14s var(--ease)}
.crow:active{background:rgba(var(--rrgb),.08)}
@media (hover:hover) and (pointer:fine){ .crow:hover{background:rgba(var(--rrgb),.07)} }
.rank{flex:none;width:34px;text-align:center;font-size:23px;font-weight:800;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,var(--g1),var(--g2) 60%,var(--g3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.crow:nth-child(1) .rank,.crow:nth-child(2) .rank,.crow:nth-child(3) .rank{font-size:29px}
.cthumb{width:52px;height:52px;border-radius:13px;flex:none;object-fit:cover;box-shadow:var(--shadow-s), 0 0 0 1px var(--line) inset}
.ctext{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}

.ct{font-size:16px;font-weight:580;letter-spacing:-.016em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ----------------------------------------------------------------- filter */
/* het tagwolkje mag breder zijn dan de zoekbalk, maar smaller dan de schappen */
#cats{width:min(820px,100%);z-index:2}
.pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (max-width:520px){
  #cats{width:100%;margin-inline:-18px;padding-inline:18px;
        overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
        scrollbar-width:none}
  #cats::-webkit-scrollbar{display:none}
  .pills{flex-wrap:nowrap;justify-content:flex-start;width:max-content}
}
.pill{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);box-shadow:var(--shadow-s);
  font-size:14.5px;font-weight:540;letter-spacing:-.01em;
  transition:transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease)}
.pill:active{transform:scale(.95)}
.pill .dot{width:10px;height:10px;border-radius:50%;background:var(--rc);flex:none;box-shadow:0 0 0 3px rgba(var(--rrgb),.16)}
.pill[aria-pressed="true"]{background:rgba(var(--rrgb),.12);border-color:rgba(var(--rrgb),.45);color:var(--ink)}
.pill.all{--rc:var(--g2);--rrgb:168,85,247}
.pill.pop{--rc:var(--g1);--rrgb:255,82,71;font-weight:620}
.pill{cursor:pointer}
/* de downloadknop staat naast de winkelknop, in de tweede hue */
/* de betaalde route is de hoofdknop, de gratis staat er rustig naast */
.buy.lead{padding:20px 22px;gap:15px;border-radius:20px;
  border-color:rgba(var(--rrgb),.55);box-shadow:var(--shadow-l)}
.buy.lead strong{font-size:19px}
.buy.lead span{font-size:13.5px}
.buy.lead .bi{width:46px;height:46px;border-radius:14px;background:rgba(var(--rrgb),.24)}
.buy.lead .bi svg{width:23px;height:23px}
/* Het Apple-beeldmerk uit logos/ staat wit op een gevulde chip. Bewust geen
   CSS-masker: dat werkt niet als de pagina vanaf de schijf wordt geopend. */
.bi.solid{background:var(--rc)}
.buy.lead .flogo{width:24px;height:24px}
.buy.dl{--rc:var(--ink-2);--rrgb:var(--rgb-quiet);
  background:var(--card);border-color:var(--line);box-shadow:var(--shadow-s)}
.buy.dl strong{color:var(--ink-2);font-size:15px}
.buy.dl .bi{background:rgba(var(--rrgb),.12)}
.buy.dl .bi svg{color:var(--ink-2);fill:none}

/* ------------------------------------------------------------ tussenvenster */
#sheet{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:max(18px,env(safe-area-inset-left,0px));
  background:rgba(12,9,20,.55);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .22s var(--ease)}
#sheet[data-open]{opacity:1}
#sheet[hidden]{display:none}
body.sheeton{overflow:hidden}
.sheetwrap{position:relative;width:min(430px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:28px;
  box-shadow:var(--shadow-l);padding:34px 30px 26px;text-align:center;
  transform:translateY(14px) scale(.97);transition:transform .28s var(--ease)}
#sheet[data-open] .sheetwrap{transform:none}
.sheetx{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);background:var(--card-2);
  color:var(--ink-3);cursor:pointer;transition:color .16s var(--ease),border-color .16s var(--ease)}
.sheetx svg{width:15px;height:15px}
.sheetx:active{transform:scale(.93)}
@media (hover:hover) and (pointer:fine){ .sheetx:hover{color:var(--ink);border-color:var(--line-2)} }
.sheetart{display:grid;place-items:center;margin-bottom:18px}
.sheetart img{width:84px;height:84px;border-radius:19px;object-fit:cover;
  box-shadow:var(--shadow-m), 0 0 0 1px var(--line) inset}
.sheetwrap h2{margin:0 0 8px;font-size:22px;font-weight:720;letter-spacing:-.028em;line-height:1.2}
.sheetwrap > p{margin:0 auto 22px;color:var(--ink-2);font-size:14.5px;line-height:1.5;max-width:30ch}
.sheetget{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:18px;margin-bottom:26px;
  border:1px solid rgba(var(--rrgb),.45);box-shadow:var(--shadow-m);
  background:linear-gradient(126deg, rgba(var(--rrgb),.18), rgba(var(--rrgb),.06));
  transition:transform .13s var(--ease), box-shadow .18s var(--ease)}
.sheetget strong{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.018em;color:var(--rc)}
.sheetget span span{font-size:13px;color:var(--ink-3)}
.sheetget .bi{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:rgba(var(--rrgb),.2)}
.sheetget .bi svg{width:21px;height:21px;color:var(--rc);fill:none}
.sheetget:active{transform:scale(.985)}
.sheetget[data-busy] .bt strong{opacity:.6}
.sheetget[data-done] .bt strong::after{content:" \2713"}
@media (hover:hover) and (pointer:fine){ .sheetget:hover{box-shadow:var(--shadow-l)} }
.sheetfoot{border-top:1px solid var(--line);padding-top:20px}
/* variant C: zin links, ronde logoknoppen rechts, delen eronder */
.followbar{display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left}
.followbar p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.35;max-width:18ch}
/* De volgknoppen mogen knallen: volle gradient, eigen glans, en een beeldmerk
   dat wit wordt gefilterd zodra het bestand in logos/ staat. */
.fbtns{display:flex;gap:10px;flex:none}
.fbtns .fbtn{width:52px;height:52px;min-height:0;padding:0;border-radius:50%;gap:0}
.fbtns .flogo{width:23px;height:23px}
.fbtn{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;gap:11px;
  min-height:54px;padding:0 20px;border-radius:16px;border:0;cursor:pointer;
  color:#fff;font-size:16px;font-weight:650;letter-spacing:-.016em;
  background:linear-gradient(118deg,var(--f1),var(--f2));
  box-shadow:0 2px 6px rgba(26,20,40,.14), 0 14px 28px -14px var(--fglow);
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), filter .2s var(--ease)}
.fbtn.tt{--f1:#0EA5E9;--f2:#6D28D9;--fglow:rgba(14,165,233,.85)}
.fbtn.ig{--f1:#FF5247;--f2:#A855F7;--fglow:rgba(255,82,71,.8)}
/* een schuine glans die bij hover overheen trekt */
.fbtn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,transparent 28%,rgba(255,255,255,.34) 46%,transparent 62%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
.fbtn svg{width:14px;height:14px;opacity:.85;flex:none}
.flogo{width:21px;height:21px;flex:none;filter:brightness(0) invert(1);opacity:.96}
.fbtn > span{flex:0 1 auto;min-width:0}
.fbtn:active{transform:scale(.975)}
@media (hover:hover) and (pointer:fine){
  .fbtn:hover{transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(26,20,40,.16), 0 22px 40px -16px var(--fglow)}
  .fbtn:hover::after{transform:translateX(120%)}
}
/* delen is de rustige derde knop */
.fbtn.share{--f1:transparent;--f2:transparent;--fglow:transparent;
  width:100%;margin-top:10px;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--line-2);box-shadow:none;font-size:15px;font-weight:580;min-height:46px}
.fbtn.share svg{opacity:.5}
.fbtn.share::after{display:none}
@media (hover:hover) and (pointer:fine){
  .fbtn.share:hover{transform:none;color:var(--ink);border-color:var(--ink-3);box-shadow:none}
}
.fbtn.share[data-done]{color:var(--c-h2);border-color:var(--c-h2)}
@media (prefers-reduced-motion:reduce){
  .fbtn::after{display:none}
  .fbtn:hover,.fbtn:active{transform:none}
}
/* tags die op de zoekterm passen, boven de treffers in het zoekpaneel */
.taghits{display:flex;flex-wrap:wrap;gap:7px;padding:11px 13px;border-bottom:1px solid var(--line)}
/* the tags of one tone, on its own page */
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.pill.sm{padding:7px 13px;font-size:13px;gap:7px;
         background:rgba(var(--rrgb),.1);border-color:rgba(var(--rrgb),.35);color:var(--ink)}
.pill.sm .dot{width:8px;height:8px;box-shadow:0 0 0 2px rgba(var(--rrgb),.18)}
@media (hover:hover) and (pointer:fine){ .pill.sm:hover{background:rgba(var(--rrgb),.2)} }
.pill.pop[aria-pressed="true"]{color:var(--rc)}
@media (hover:hover) and (pointer:fine){ .pill:hover{border-color:var(--line-2);color:var(--ink)} }

/* ---------------------------------------------------------------- shelves */
.shelf{position:relative}
.shead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:11px}
.shead h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.028em;
  background:linear-gradient(96deg,var(--rc),var(--ink) 68%);-webkit-background-clip:text;background-clip:text;color:transparent}
.shead p{margin:0;color:var(--ink-3);font-size:14px;flex:1;min-width:0}
/* De rail draagt de uitloop naar de schermrand, zodat de vervaging precies op
   die rand ligt. */
.rail{position:relative;
  margin-inline:calc(-1*max(18px,env(safe-area-inset-left,0px)))}
.rail::before,.rail::after{content:"";position:absolute;top:0;bottom:10px;width:52px;
  pointer-events:none;z-index:2;opacity:0;transition:opacity .3s var(--ease)}
.rail::before{left:0;background:linear-gradient(90deg,var(--paper) 18%,transparent)}
.rail::after{right:0;background:linear-gradient(270deg,var(--paper) 18%,transparent)}
.rail[data-l="1"]::before{opacity:1}
.rail[data-r="1"]::after{opacity:1}
.railbtn{position:absolute;top:48px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;z-index:3;cursor:pointer;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-m);color:var(--ink-2);
  opacity:0;pointer-events:none;transform:scale(.88);
  transition:opacity .22s var(--ease), transform .22s var(--ease), color .18s var(--ease)}
.railbtn svg{width:17px;height:17px}
.railbtn.l{left:6px}
.railbtn.r{right:6px}
.railbtn.r svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .rail[data-l="1"]:hover .railbtn.l,
  .rail[data-r="1"]:hover .railbtn.r{opacity:1;pointer-events:auto;transform:scale(1)}
  .railbtn:hover{color:var(--rc)}
}
.railbtn:active{transform:scale(.9)}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:124px;gap:13px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:3px 0 10px;
  padding-inline:max(18px,env(safe-area-inset-left,0px));
  /* zonder dit springt de scroll bij het laden over de padding heen en lijkt de
     rij al verschoven */
  scroll-padding-inline:max(18px,env(safe-area-inset-left,0px));
  touch-action:pan-x pan-y;scrollbar-width:none}
.scroller::-webkit-scrollbar{height:0}
.card{scroll-snap-align:start;display:flex;flex-direction:column;gap:7px;min-width:0}
.art{position:relative;display:block;border-radius:15px;overflow:hidden;background:var(--card-2);
  box-shadow:var(--shadow-m), 0 0 0 1px var(--line) inset;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
/* height:auto is nodig: het height-attribuut op de img wint anders van
   aspect-ratio en maakt de hoes rechthoekig */
.art img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.card:active .art{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .card:hover .art{transform:translateY(-4px) rotate(-.8deg);
    box-shadow:var(--shadow-l), 0 16px 34px -16px rgba(var(--rrgb),.75), 0 0 0 1px rgba(var(--rrgb),.3) inset}
  .card:hover .ctitle{color:var(--rc)}
}
.ctitle{font-size:13.5px;font-weight:570;letter-spacing:-.014em;line-height:1.3;transition:color .16s var(--ease);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.csub{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* -------------------------------------------------------------- tone page */
#detail{padding-block:clamp(16px,4vh,28px) 70px;position:relative}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:14.5px;font-weight:520;
  padding:9px 15px 9px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-s);margin-bottom:26px;transition:transform .12s var(--ease)}
.back:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){ .back:hover{border-color:var(--line-2);color:var(--ink)} }
.back svg{width:17px;height:17px}
.hero{display:flex;gap:clamp(18px,4vw,34px);align-items:center;flex-wrap:wrap;margin-bottom:28px}
.heroart{position:relative;width:clamp(136px,34vw,188px);aspect-ratio:1;flex:none;border-radius:26px;overflow:hidden;
  background:var(--card-2);box-shadow:var(--shadow-l), 0 24px 56px -22px rgba(var(--rrgb),.6), 0 0 0 1px var(--line) inset}
.heroart img{width:100%;height:100%;object-fit:cover}
.herometa{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1 1 240px}
.herometa h1{margin:0;font-size:clamp(26px,6.6vw,42px);line-height:1.08;font-weight:740;letter-spacing:-.035em;
  text-wrap:balance;background:linear-gradient(104deg,var(--ink) 42%,var(--rc));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.02em .06em}
.by{margin:0;color:var(--ink-2);font-size:14.5px}
.actions{display:flex;align-items:center;gap:14px;margin-top:4px}
.plabel{font-size:14.5px;color:var(--ink-3)}
.gets{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:13px;margin-bottom:16px;align-items:stretch}
@media (max-width:640px){ .gets{grid-template-columns:1fr} }
.buy{display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:18px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-m);
  transition:transform .13s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease)}
.buy:active{transform:scale(.985)}
.buy strong{font-size:16px;font-weight:650;letter-spacing:-.018em}
.buy span{font-size:13px;color:var(--ink-3)}
.buy{background:linear-gradient(126deg, rgba(var(--rrgb),.16), rgba(var(--rrgb),.05));
  border-color:rgba(var(--rrgb),.38)}
.buy strong{color:var(--rc)}
.buy .bi{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(var(--rrgb),.18);display:grid;place-items:center}
.buy .bi svg{width:19px;height:19px;fill:var(--rc)}
.buy .bt{display:flex;flex-direction:column;gap:2px;min-width:0}
@media (hover:hover) and (pointer:fine){
  .buy:hover{box-shadow:var(--shadow-l);border-color:rgba(var(--rrgb),.7)}
}
.note{margin:12px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.how{border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;
  margin-bottom:44px;box-shadow:var(--shadow-s)}
.how summary{padding:15px 18px;cursor:pointer;font-size:14.5px;color:var(--ink-2);list-style:none;font-weight:520}
.how summary::-webkit-details-marker{display:none}
.how summary::after{content:"+";float:right;color:var(--ink-3);font-size:17px;line-height:1}
.how[open] summary::after{content:"\2212"}
.howin{padding:0 18px 18px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.howin p{margin:0 0 11px}
.howin strong{color:var(--ink);font-weight:620}
.rel + .rel{margin-top:26px}
.rel h2{margin:0 0 14px;font-size:20px;font-weight:700;letter-spacing:-.024em;
  border-left:4px solid var(--rc);padding-left:12px}
.rows{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-m)}

/* ------------------------------------------------------------------- foot */
.foot{padding-block:28px 50px;color:var(--ink-3);font-size:13.5px;display:flex;flex-direction:column;gap:7px;position:relative}
.foot::before{content:"";position:absolute;left:max(18px,env(safe-area-inset-left,0px));
  right:max(18px,env(safe-area-inset-right,0px));top:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3))}
.foot b{color:var(--ink-2);font-weight:620}
.foot p{margin:0}

@media (max-width:620px){
  .top{padding-block:32px 26px}
  .kbd{display:none}
    .chead{padding:20px 17px 15px}
  .crow{padding:10px 14px 10px 10px;gap:10px}
  .rank{width:26px;font-size:19px}
  .crow:nth-child(1) .rank,.crow:nth-child(2) .rank,.crow:nth-child(3) .rank{font-size:23px}
  .cthumb{width:46px;height:46px}
      .hero{gap:16px}
  .heroart{width:118px;border-radius:20px}
  #shelves{gap:22px}
  .scroller{grid-auto-columns:112px;gap:11px}
  .rail::before,.rail::after{width:38px}
}
/* smal scherm: de categoriechip wijkt, de afspeelknop blijft - daar draait het om */
@media (max-width:420px){ .crow .chip{display:none} }
@media (prefers-reduced-motion:reduce){
  .pbtn[data-playing="1"]::after{animation:none;opacity:0}
  .pbtn:active,.card:active .art,.pill:active,.back:active,.buy:active{transform:none}
  .card:hover .art{transform:none}
}

/* on a tone page the brand shrinks so the content starts higher */
body[data-view="detail"] .logo{font-size:clamp(26px,6vw,34px);filter:none}
body[data-view="detail"] .top{padding-block:20px 22px;gap:16px}
body[data-view="detail"] #cats,
body[data-view="detail"] #minicats{display:none}
body[data-view="detail"] .wash::before{inset:-70% -14% auto -14%;opacity:.75}