/* Discover V5 — refinement layer. Original icons and layout structure unchanged. */
:root{--sjr-motion:cubic-bezier(.2,.8,.2,1);}
#discovery{overscroll-behavior-x:contain;}
.tile,.tile-open,.tile-photo{contain:layout style;}
.tile-photo{border-radius:5px;background:#181816;}
.tile-photo img{transform:translateZ(0);backface-visibility:hidden;transition:transform .27s var(--sjr-motion),filter .2s ease;}
.tile-open{position:relative;touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;will-change:auto;}
.tile-open:active .tile-photo img,.tile-open.sjr-peek-pressing .tile-photo img{transform:scale(.989);}
.tile-open.sjr-peek-pressed .tile-photo img{transform:scale(.978);filter:brightness(.79);}
.tile-title{font-weight:670;letter-spacing:-.025em;line-height:1.3;}
.tile-more{color:#888882;transition:color .16s ease;}
.tile-more:hover,.tile-more:focus-visible{color:#f4f1e8;}
.tile-type{border-radius:3px;background:rgba(9,9,9,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.tile-fresh{background:rgba(244,241,233,.97);}
#detail{overscroll-behavior:contain;scrollbar-gutter:stable;}
.detail-top{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.detail-photo{height:min(39dvh,380px);}
.detail-photo img{object-fit:cover;}
.detail-bottom{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
#detail .related-grid .tile-photo{border-radius:5px;}
.mobile-nav{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
#sjr-peek[hidden]{display:none!important;}
#sjr-peek{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:16px 20px calc(20px + env(safe-area-inset-bottom));pointer-events:none;opacity:0;transition:opacity .15s ease;}
#sjr-peek.is-visible{opacity:1;pointer-events:auto;}
.sjr-peek-veil{position:absolute;inset:0;background:rgba(2,2,2,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.sjr-peek-panel{position:relative;display:flex;flex-direction:column;width:min(100%,395px);max-height:min(84dvh,760px);background:#0b0b0b;color:#f5f3ee;border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden;box-shadow:0 26px 65px rgba(0,0,0,.58);transform:translateY(12px) scale(.967);transition:transform .19s var(--sjr-motion);touch-action:none;}
#sjr-peek.is-visible .sjr-peek-panel{transform:translateY(0) scale(1);}
.sjr-peek-photo{height:min(49dvh,450px);min-height:180px;background:#171717;position:relative;flex:none;overflow:hidden;}
.sjr-peek-photo img{width:100%;height:100%;object-fit:cover;}
.sjr-peek-photo.is-artwork img{object-fit:contain;}
.sjr-peek-photo:after{content:"";pointer-events:none;position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.42));}
.sjr-peek-top{position:absolute;z-index:1;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px;}
.sjr-peek-type{font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.71);padding:6px 8px;border-radius:3px;font-weight:700;}
.sjr-peek-dismiss{font-size:24px;line-height:1;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff52;background:#0008;border-radius:50%;color:white;}
.sjr-peek-inner{min-height:110px;overflow:auto;padding:16px 17px 17px;overscroll-behavior:contain;}
.sjr-peek-title{font-family:var(--display);font-size:clamp(27px,7vw,40px);font-weight:750;line-height:1.02;letter-spacing:-.025em;}
.sjr-peek-artist{font-size:11px;margin-top:7px;color:#bcb9b2;font-weight:600;}
.sjr-peek-description{font-size:12px;line-height:1.5;margin-top:9px;color:#adaaa5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sjr-peek-controls{display:flex;gap:9px;margin-top:14px;}
.sjr-peek-controls button{flex:1;min-height:42px;border:1px solid #50504d;border-radius:5px;font-size:12px;font-weight:660;display:grid;place-items:center;color:#eae7e2;}
.sjr-peek-controls .sjr-peek-open{background:#f4f2ec;border-color:#f4f2ec;color:#0b0b0b;}
.sjr-peek-save[aria-pressed=true]{color:#fa303c;border-color:#b42c38;}
.sjr-peek-active{overscroll-behavior:none;}
@keyframes sjr-zoom{from{opacity:.96;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:350px){
 .sjr-peek-photo{height:min(43dvh,330px);min-height:145px}
 .sjr-peek-inner{padding:13px;}
 .sjr-peek-panel{max-height:85dvh;}
}
@media(min-width:700px){
 #sjr-peek .sjr-peek-panel{width:360px}
 .sjr-peek-photo{height:min(52dvh,470px)}
}
@media(prefers-reduced-motion:reduce){
 #sjr-peek,.sjr-peek-panel,.tile-photo img,#detail{transition:none!important;animation:none!important;transform:none!important}
}

@media(max-width:849px){body{padding-bottom:calc(75px + env(safe-area-inset-bottom,0px))!important}}

/* SJR / Discover – image-first note cards. Layout informed by REDnote; no copied UI code. */
#discovery-surface{padding:0 12px 18px}
.grid{gap:12px}.grid-col{gap:18px}
.sjr-note{min-width:0;contain:layout style}
.sjr-note .tile-open{display:block;width:100%;text-align:left}
.sjr-note .tile-photo{border-radius:9px;overflow:hidden;background:#19191b;box-shadow:0 0 0 1px #ffffff0a}
.sjr-note .tile-photo img{transition:transform .22s ease}
.sjr-note .tile-type{top:9px;left:9px;border-radius:5px;font-size:8px;font-weight:700;letter-spacing:.065em;padding:5px 7px;background:#08080ac2}
.sjr-note .tile-title{padding:9px 1px 0;font-size:13px;font-weight:670;line-height:1.38;letter-spacing:-.022em;min-height:0;color:#f5f4f2}
.sjr-note-meta{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:35px;margin-top:5px;padding:0 0 0 1px}
.sjr-note-person{display:flex;align-items:center;min-width:0;gap:7px;min-height:34px;flex:1;text-align:left}
.sjr-note-person:disabled{opacity:1;cursor:default}
.sjr-note-avatars{display:flex;flex:none;min-width:20px;align-items:center}
.sjr-note-avatar{height:23px!important;width:23px!important;object-fit:cover;object-position:center;border-radius:50%;border:1px solid #47464a;background:#28272b;flex:none}
.sjr-note-avatars .sjr-note-avatar+.sjr-note-avatar{margin-left:-9px}
.sjr-note-avatar-fallback{display:grid;place-items:center;font-size:10px;font-weight:700;color:#b9b6b3}
.sjr-note-name{font-size:10px;color:#b2b0b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.sjr-note-genre{font-size:10px;color:#aeaaad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.sjr-note-save{width:38px;height:38px;flex:none;display:grid;place-items:center;color:#b7b5b7;transition:transform .16s ease,color .16s ease}
.sjr-note-save svg{width:20px;height:20px;fill:none}
.sjr-note-save[aria-pressed="true"]{color:#fa303c}
.sjr-note-save[aria-pressed="true"] svg{fill:#fa303c2b}
.sjr-note-save:active{transform:scale(.87)}
.sjr-note-save:focus-visible,.sjr-note-person:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-radius:7px}
#sjr-rail-nav{display:none}
@media(min-width:700px){#discovery-surface{padding:0 20px 20px}.grid{gap:16px}.grid-col{gap:20px}.sjr-note .tile-title{font-size:15px}.sjr-note-name,.sjr-note-genre{font-size:11px}}
@media(min-width:1100px){#sjr-rail-nav{display:flex;flex-direction:column;position:static;transform:none;width:100%;max-width:none;min-height:0;padding:0;background:none;border:0}#sjr-rail-nav a{height:48px;min-height:48px;display:flex;flex-direction:row;justify-content:flex-start;gap:16px;padding:0 14px;font-size:13px;color:#aaa;white-space:normal}#sjr-rail-nav .current{color:white;background:#181819;border-radius:9px}#sjr-rail-nav svg{width:20px;height:20px}#discovery-surface{padding-left:0;padding-right:0}.grid{gap:18px}}
@media(prefers-reduced-motion:reduce){.sjr-note-save,.sjr-note .tile-photo img{transition:none}}

.sjr-lang-switch{height:36px;min-height:36px;padding:0 7px;white-space:nowrap;border-radius:7px;color:#f3f1f1!important;font-size:10px;font-weight:650;letter-spacing:0;text-decoration:none!important}
.sjr-lang-switch:active{background:#242424}
@media(max-width:360px){.brandline h1{display:none}.brandline{justify-content:space-between}.sjr-lang-switch{font-size:10px}}