/* sheen-web 0.2.0 (unreleased): tokens, glass, user settings and the music and social widgets only. Copied from sheen-web dist/sheen.css; do not edit here. */
/* sheen-web tokens, generated from tokens/tokens.json (Flutter sheen 0.3.6) */
:root{--sheen-background:#FAFAF8;--sheen-surface:#FFFFFF;--sheen-surface-muted:#F2F2EF;--sheen-track:#E6E6E2;--sheen-separator:#10131817;--sheen-text:#101318;--sheen-text-secondary:#555B66;--sheen-text-tertiary:#6A707B;--sheen-accent:#0A5FE0;--sheen-on-accent:#FFFFFF;--sheen-accent-text:#0A5FE0;--sheen-success:#0B7A3E;--sheen-warning:#8F5200;--sheen-danger:#C62828;--sheen-rating:#F5B83D;--sheen-sheet:#FFFFFF;--sheen-deal-fill:#C62828;--sheen-tonal:#1013180D;--sheen-space-xs:4px;--sheen-space-s:8px;--sheen-space-m:12px;--sheen-space-l:16px;--sheen-space-xl:20px;--sheen-space-xxl:24px;--sheen-space-xxxl:32px;--sheen-space-hit:44px;--sheen-radius-card:24px;--sheen-radius-photo:20px;--sheen-radius-sheet:38px;--sheen-radius-field:14px;--sheen-radius-group:20px;--sheen-width-readable:720px;--sheen-width-wide:1080px;--sheen-width-page:1440px;color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sheen-background:#05070B;--sheen-surface:#0E1219;--sheen-surface-muted:#161B24;--sheen-track:#212734;--sheen-separator:#FFFFFF17;--sheen-text:#F5F6F8;--sheen-text-secondary:#A9B0BD;--sheen-text-tertiary:#868E9D;--sheen-accent:#1F6FEB;--sheen-on-accent:#FFFFFF;--sheen-accent-text:#6AA8FF;--sheen-success:#5EE08F;--sheen-warning:#FFC266;--sheen-danger:#FF7A7A;--sheen-rating:#F5B83D;--sheen-sheet:#10141B;--sheen-deal-fill:#D93036;--sheen-tonal:#FFFFFF14;color-scheme:dark}}
:root[data-theme="dark"]{--sheen-background:#05070B;--sheen-surface:#0E1219;--sheen-surface-muted:#161B24;--sheen-track:#212734;--sheen-separator:#FFFFFF17;--sheen-text:#F5F6F8;--sheen-text-secondary:#A9B0BD;--sheen-text-tertiary:#868E9D;--sheen-accent:#1F6FEB;--sheen-on-accent:#FFFFFF;--sheen-accent-text:#6AA8FF;--sheen-success:#5EE08F;--sheen-warning:#FFC266;--sheen-danger:#FF7A7A;--sheen-rating:#F5B83D;--sheen-sheet:#10141B;--sheen-deal-fill:#D93036;--sheen-tonal:#FFFFFF14;color-scheme:dark}
:root[data-theme="light"]{--sheen-background:#FAFAF8;--sheen-surface:#FFFFFF;--sheen-surface-muted:#F2F2EF;--sheen-track:#E6E6E2;--sheen-separator:#10131817;--sheen-text:#101318;--sheen-text-secondary:#555B66;--sheen-text-tertiary:#6A707B;--sheen-accent:#0A5FE0;--sheen-on-accent:#FFFFFF;--sheen-accent-text:#0A5FE0;--sheen-success:#0B7A3E;--sheen-warning:#8F5200;--sheen-danger:#C62828;--sheen-rating:#F5B83D;--sheen-sheet:#FFFFFF;--sheen-deal-fill:#C62828;--sheen-tonal:#1013180D;color-scheme:light}
/* 02-glass.css */
/* Glass: only on navigation and controls (headers, the search bar, floating bars, map controls), never on cards or
   long scrolling areas; at most three glass surfaces in a viewport. The blur radius is never animated.
   .sheen-glass          regular glass over the page
   .sheen-glass-clear    clear glass over a photo (white text)
   .sheen-glass-prominent the accent fill (primary actions)                                                         */
.sheen-glass,.sheen-glass-clear,.sheen-glass-prominent{position:relative;isolation:isolate}
.sheen-glass{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),rgba(28,31,38,.62);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.42),0 1px 2px rgba(0,0,0,.3)}
.sheen-glass-clear{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)),rgba(0,0,0,.28);-webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3),0 6px 18px rgba(0,0,0,.25)}
.sheen-glass-prominent{color:var(--sheen-on-accent);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 60%),var(--sheen-accent);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3),0 6px 16px color-mix(in srgb,var(--sheen-accent) 24%,transparent)}
.sheen-glass::after,.sheen-glass-clear::after,.sheen-glass-prominent::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(170deg,rgba(255,255,255,.2),rgba(255,255,255,.07) 45%,rgba(255,255,255,.05) 75%,rgba(255,255,255,.1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sheen-glass-clear::after{background:linear-gradient(170deg,rgba(255,255,255,.38),rgba(255,255,255,.12) 45%,rgba(255,255,255,.08) 75%,rgba(255,255,255,.2))}
.sheen-glass-prominent::after{background:linear-gradient(170deg,rgba(255,255,255,.3),rgba(255,255,255,.08) 50%,rgba(255,255,255,.12))}
:root[data-theme="light"] .sheen-glass{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.5) 50%,rgba(255,255,255,.64));-webkit-backdrop-filter:blur(14px) saturate(200%) brightness(1.06);backdrop-filter:blur(14px) saturate(200%) brightness(1.06);box-shadow:inset 0 1px .5px #fff,inset 0 -1px .5px rgba(255,255,255,.7),inset 0 0 0 .5px rgba(0,0,0,.05),0 10px 30px rgba(16,20,30,.14),0 1px 3px rgba(16,20,30,.08)}
:root[data-theme="light"] .sheen-glass::after{background:linear-gradient(160deg,#fff,rgba(255,255,255,.4) 35%,rgba(255,255,255,.2) 62%,rgba(255,255,255,.9))}
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]) .sheen-glass{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.5) 50%,rgba(255,255,255,.64));-webkit-backdrop-filter:blur(14px) saturate(200%) brightness(1.06);backdrop-filter:blur(14px) saturate(200%) brightness(1.06);box-shadow:inset 0 1px .5px #fff,inset 0 -1px .5px rgba(255,255,255,.7),inset 0 0 0 .5px rgba(0,0,0,.05),0 10px 30px rgba(16,20,30,.14),0 1px 3px rgba(16,20,30,.08)}
:root:not([data-theme="dark"]) .sheen-glass::after{background:linear-gradient(160deg,#fff,rgba(255,255,255,.4) 35%,rgba(255,255,255,.2) 62%,rgba(255,255,255,.9))}}
.sheen-lens{background:rgba(255,255,255,.11);box-shadow:inset 0 .5px 0 rgba(255,255,255,.14)}
:root[data-theme="light"] .sheen-lens{background:rgba(118,118,128,.14);box-shadow:inset 0 1px .5px rgba(255,255,255,.9)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .sheen-lens{background:rgba(118,118,128,.14);box-shadow:inset 0 1px .5px rgba(255,255,255,.9)}}
/* no backdrop-filter: an opaque surface of the same colour */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sheen-glass{background:var(--sheen-surface-muted)}.sheen-glass-clear{background:rgba(0,0,0,.6)}}

/* 06-access.css */
/* The user's settings win, as in Flutter sheen: reduced transparency and high contrast make glass opaque; reduced
   motion stops movement. */
@media (prefers-reduced-transparency: reduce){
.sheen-glass{background:var(--sheen-surface-muted);-webkit-backdrop-filter:none;backdrop-filter:none}
.sheen-glass-clear,.sheen-trip-tag{background:rgba(0,0,0,.72);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast: more){
.sheen-glass{background:var(--sheen-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1.5px var(--sheen-text-secondary)}
.sheen-glass-clear{background:rgba(0,0,0,.8)}
.sheen-choice,.sheen-field{box-shadow:inset 0 0 0 1.5px var(--sheen-text-secondary)}
.sheen-secondary{color:var(--sheen-text)}}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors: active){.sheen-deal-badge,.sheen-score,.sheen-pill{border:1px solid CanvasText}}

/* 07-music.css */
/* Music: the Flutter sheen music widgets for the web (SheenTabBar, SheenMiniPlayer, SheenTrackRow, SheenArtwork,
   SheenArtworkGlow, SheenSeekBar, SheenTransport, SheenPlayingBars, SheenShelf) and a bottom sheet.
   Fast on a phone: glass only on the dock, the mini player and the play button; rows, shelves and sheets are solid;
   moving parts (lens, progress, seek, playing bars) change only transform, never width or a blur.

   .sheen-dock            fixed bottom bar: .sheen-dock-tabs (a capsule, set --n tabs and --i the current one) with
                          .sheen-dock-lens and .sheen-dock-tab buttons, then .sheen-dock-search (a circle)
   .sheen-mini-player     add .sheen-glass; art, .sheen-mini-player-text, buttons, .sheen-mini-player-progress (--p 0…1)
   .sheen-track-row       art, .sheen-track-row-text (.sheen-track-row-title, .sheen-track-row-sub), actions;
                          aria-current marks the playing song, .sheen-dimmed a hidden artist
   .sheen-artwork         a cover (--s size, --r corner), an <img> or a placeholder <svg>; .sheen-round for artists
   .sheen-artwork-glow    the playing cover, blurred behind a page: one small <img>, a static blur
   .sheen-seek            data-sheen-seek; --p played and --b buffered (0…1); .sheen-seek-times under it
   .sheen-transport       .sheen-transport-small, -skip and -play buttons
   .sheen-playing-bars    three <i>; .sheen-playing moves them
   .sheen-shelf           .sheen-shelf-head, .sheen-shelf-row of .sheen-shelf-item (--s width)
   .sheen-sheet           a <dialog autofocus> (it, not its first button, takes the focus when it opens):
                          data-sheen-sheet-close closes it, a tap outside too (sheen.js)                                 */

/* ---------- artwork ---------- */
.sheen-artwork{--s:48px;--r:calc(var(--s)/6);position:relative;width:var(--s);height:var(--s);flex:none;display:grid;place-items:center;border-radius:var(--r);overflow:hidden;background:var(--sheen-surface-muted);color:var(--sheen-text-tertiary)}
.sheen-artwork>img{width:100%;height:100%;object-fit:cover;display:block}
.sheen-artwork>svg{width:42%;height:42%}
.sheen-artwork::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px var(--sheen-separator);pointer-events:none}
.sheen-artwork.sheen-round{border-radius:50%}

/* ---------- playing bars ---------- */
.sheen-playing-bars{display:inline-flex;align-items:flex-end;gap:2px;width:14px;height:14px;flex:none;color:var(--sheen-accent-text)}
.sheen-playing-bars>i{flex:1;height:100%;border-radius:2px;background:currentColor;transform-origin:50% 100%;transform:scaleY(var(--sheen-rest))}
.sheen-playing-bars>i:nth-child(1){--sheen-rest:.55}
.sheen-playing-bars>i:nth-child(2){--sheen-rest:.9;animation-delay:-.33s}
.sheen-playing-bars>i:nth-child(3){--sheen-rest:.4;animation-delay:-.66s}
.sheen-playing-bars.sheen-playing>i{animation:sheen-bars .9s ease-in-out infinite alternate}
@keyframes sheen-bars{from{transform:scaleY(.3)}to{transform:scaleY(1)}}

/* ---------- track row ---------- */
.sheen-track-row{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding-block:6px;padding-inline:16px 4px;border:0;background:none;color:inherit;text-align:start;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.sheen-track-row:active{background:var(--sheen-tonal,rgba(127,127,127,.14))}
.sheen-track-row-text{flex:1;min-width:0;display:flex;flex-direction:column}
.sheen-track-row-title{font-size:17px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-track-row-sub{display:flex;align-items:center;gap:3px;min-width:0;font-size:15px;line-height:1.35;color:var(--sheen-text-secondary)}
.sheen-track-row-sub>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sheen-track-row-sub>svg{width:13px;height:13px;flex:none;color:var(--sheen-success)}
.sheen-track-row[aria-current]:not([aria-current="false"]) .sheen-track-row-title{color:var(--sheen-accent-text)}
.sheen-track-row.sheen-dimmed{opacity:.4}
.sheen-track-row-num{width:24px;flex:none;text-align:center;font-variant-numeric:tabular-nums;color:var(--sheen-text-secondary)}
.sheen-track-action{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;border-radius:22px;background:none;color:var(--sheen-text-secondary);cursor:pointer}
.sheen-track-action>svg{width:20px;height:20px}
.sheen-track-action[aria-pressed="true"]{color:var(--sheen-success)}

/* ---------- mini player ---------- */
.sheen-mini-player{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding-block:8px;padding-inline:8px 4px;border-radius:26px;overflow:hidden;color:var(--sheen-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheen-mini-player .sheen-artwork{--s:44px;--r:10px}
.sheen-mini-player-text{flex:1;min-width:0;display:flex;flex-direction:column}
.sheen-mini-player-title{font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-mini-player-sub{font-size:13.5px;line-height:1.3;color:var(--sheen-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-mini-player button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;border-radius:22px;background:none;color:var(--sheen-text);cursor:pointer}
.sheen-mini-player button>svg{width:24px;height:24px}
.sheen-mini-player-progress{position:absolute;inset-inline:18px;bottom:3px;height:2px;border-radius:2px;overflow:hidden;background:var(--sheen-separator);pointer-events:none}
.sheen-mini-player-progress::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--sheen-text) 80%,transparent);transform-origin:var(--sheen-start-edge,left);transform:scaleX(var(--p,0))}

/* ---------- dock (SheenTabBar) ---------- */
.sheen-dock{position:fixed;inset-inline:0;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);z-index:30;display:flex;justify-content:center;gap:10px;padding-inline:16px;pointer-events:none}
.sheen-dock>*{pointer-events:auto}
.sheen-dock-tabs{--n:4;--i:0;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));flex:1;max-width:478px;height:62px;padding-inline:4px;border-radius:31px}
.sheen-dock-lens{position:absolute;inset-block:4px;inset-inline-start:4px;width:calc((100% - 8px)/var(--n));border-radius:27px;background:rgba(255,255,255,.11);box-shadow:inset 0 .5px 0 rgba(255,255,255,.14);transform:translateX(calc(var(--i)*100%*var(--sheen-dir,1)));transition:transform .42s cubic-bezier(.3,1.35,.55,1);pointer-events:none}
.sheen-dock-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;border:0;background:none;color:var(--sheen-text);font-size:11px;font-weight:600;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheen-dock-tab>svg{width:24px;height:24px;transition:transform .2s}
.sheen-dock-tab:active>svg{transform:scale(.88)}
.sheen-dock-tab[aria-current]:not([aria-current="false"]),.sheen-dock-search[aria-current]:not([aria-current="false"]){color:var(--sheen-accent-text)}
.sheen-dock-search{display:grid;place-items:center;width:62px;height:62px;flex:none;border:0;border-radius:50%;color:var(--sheen-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheen-dock-search>svg{width:25px;height:25px}
:root[data-theme="light"] .sheen-dock-lens{background:rgba(118,118,128,.14);box-shadow:inset 0 1px .5px rgba(255,255,255,.9)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .sheen-dock-lens{background:rgba(118,118,128,.14);box-shadow:inset 0 1px .5px rgba(255,255,255,.9)}}
[dir="rtl"]{--sheen-dir:-1;--sheen-start-edge:right}

/* ---------- artwork glow ---------- */
.sheen-artwork-glow{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--sheen-background);pointer-events:none}
.sheen-artwork-glow>img{position:absolute;inset:-25%;width:150%;height:150%;object-fit:cover;filter:blur(60px) saturate(1.3);opacity:.7;transform:translateZ(0)}
.sheen-artwork-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--sheen-background) 0%,transparent),color-mix(in srgb,var(--sheen-background) 35%,transparent) 45%,color-mix(in srgb,var(--sheen-background) 90%,transparent))}
:root[data-theme="light"] .sheen-artwork-glow>img{opacity:.45}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .sheen-artwork-glow>img{opacity:.45}}

/* ---------- seek bar ---------- */
.sheen-seek{--p:0;--b:0;position:relative;display:flex;align-items:center;height:26px;cursor:pointer;touch-action:none;color:var(--sheen-text);-webkit-tap-highlight-color:transparent}
.sheen-seek-track{position:relative;width:100%;height:4px;border-radius:5px;overflow:hidden;background:color-mix(in srgb,currentColor 16%,transparent);transition:transform .18s;transform:scaleY(1)}
.sheen-seek-track::before,.sheen-seek-track::after{content:"";position:absolute;inset:0;transform-origin:var(--sheen-start-edge,left)}
.sheen-seek-track::before{background:color-mix(in srgb,currentColor 14%,transparent);transform:scaleX(var(--b))}
.sheen-seek-track::after{background:color-mix(in srgb,currentColor 85%,transparent);transform:scaleX(var(--p))}
.sheen-seek.sheen-active .sheen-seek-track{transform:scaleY(2.25)}
.sheen-seek.sheen-active .sheen-seek-track::after{background:currentColor}
.sheen-seek-times{display:flex;justify-content:space-between;font-size:12.5px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--sheen-text) 60%,transparent)}

/* ---------- transport ---------- */
.sheen-transport{display:flex;align-items:center;justify-content:space-between;direction:ltr}
.sheen-transport button{display:inline-flex;align-items:center;justify-content:center;flex:none;border:0;background:none;color:var(--sheen-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheen-transport-small{width:44px;height:44px;border-radius:22px;color:color-mix(in srgb,var(--sheen-text) 75%,transparent)!important}
.sheen-transport-small>svg{width:22px;height:22px}
.sheen-transport-small[aria-pressed="true"]{color:var(--sheen-accent-text)!important}
.sheen-transport-skip{width:56px;height:56px;border-radius:28px}
.sheen-transport-skip>svg{width:30px;height:30px}
.sheen-transport-play{width:76px;height:76px;border-radius:50%}
.sheen-transport-play>svg{width:34px;height:34px}
.sheen-transport button:active>svg{transform:scale(.9)}

/* ---------- shelf ---------- */
.sheen-shelf{display:flex;flex-direction:column;gap:12px}
.sheen-shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-inline:16px}
.sheen-shelf-head>h2{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.015em;margin:0}
.sheen-shelf-row{display:flex;gap:var(--sheen-gap,14px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;padding-inline:16px;scrollbar-width:none}
.sheen-shelf-row::-webkit-scrollbar{display:none}
.sheen-shelf-item{--s:150px;display:flex;flex-direction:column;gap:8px;width:var(--s);flex:none;padding:0;border:0;background:none;color:inherit;text-align:start;font:inherit;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.sheen-shelf-item .sheen-artwork{width:100%;height:auto;aspect-ratio:1;--r:14px}
.sheen-shelf-item .sheen-artwork.sheen-round{border-radius:50%}
.sheen-shelf-item:active .sheen-artwork{transform:scale(.97)}
.sheen-shelf-title{font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-shelf-sub{margin-top:-6px;font-size:13.5px;line-height:1.3;color:var(--sheen-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- sheet ---------- */
.sheen-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:560px;max-height:85dvh;margin:0 auto;padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 12px);border:0;border-radius:38px 38px 0 0;background:var(--sheen-sheet,var(--sheen-surface));color:var(--sheen-text);overflow-y:auto;overscroll-behavior:contain}
.sheen-sheet:focus{outline:none}
.sheen-sheet::before{content:"";display:block;width:36px;height:5px;margin:0 auto 8px;border-radius:3px;background:var(--sheen-separator)}
.sheen-sheet::backdrop{background:rgba(0,0,0,.42)}
.sheen-sheet[open]{animation:sheen-sheet-in .34s cubic-bezier(.2,.9,.3,1)}
.sheen-sheet[open]::backdrop{animation:sheen-fade-in .34s ease-out}
.sheen-sheet.sheen-closing{animation:sheen-sheet-out .22s ease-in forwards}
.sheen-sheet.sheen-closing::backdrop{animation:sheen-fade-out .22s ease-in forwards}
@keyframes sheen-sheet-in{from{transform:translateY(100%)}}
@keyframes sheen-sheet-out{to{transform:translateY(100%)}}
@keyframes sheen-fade-in{from{opacity:0}}
@keyframes sheen-fade-out{to{opacity:0}}

/* 08-social.css */
/* Social: the Flutter sheen chat and sharing widgets for the web (SheenAvatar, SheenAvatarStack, SheenUnreadBadge,
   SheenChatRow, SheenRequestCard, SheenPresenceStrip, SheenChatBubble, SheenShareCard, SheenReactionBar,
   SheenComposer, SheenTypingIndicator, SheenShareSheet's friend picker, SheenListenTogetherBanner).
   Solid surfaces only (chats scroll long); the accent marks my bubbles, unread counts and the one main action.

   .sheen-avatar          a circle (--s size, --c fill), initials or an <img>; data-presence="online" adds a dot,
                          data-presence="playing" a badge holding .sheen-playing-bars
   .sheen-avatar-stack    2-4 .sheen-avatar overlapping
   .sheen-unread          a count pill
   .sheen-chat-row        avatar, .sheen-chat-row-text (.sheen-chat-row-title, .sheen-chat-row-sub), .sheen-chat-row-end
   .sheen-request-card    avatar, text, actions
   .sheen-presence-strip  a scrolling row of .sheen-presence-item (avatar, name, song)
   .sheen-thread          the message column; .sheen-day separators; .sheen-msg (.sheen-mine) holds a .sheen-bubble or
                          a .sheen-share-card, then .sheen-reactions; .sheen-msg-author names the sender in groups
   .sheen-share-card      art, .sheen-share-card-kind, -title, -sub, .sheen-share-card-actions;
                          .sheen-share-card-play over the art; .sheen-compact lays it out as a row
   .sheen-reaction-bar    the emoji picker over a held message (role="menu")
   .sheen-composer        attach button, .sheen-composer-field (a textarea), send button
   .sheen-typing          three dots
   .sheen-friend-pick     a grid of buttons (aria-pressed) with an avatar and a name, for a share sheet
   .sheen-jam-banner      listen-together invitation or status, accent fill                                          */

/* ---------- avatar ---------- */
.sheen-avatar{--s:44px;--c:var(--sheen-accent);position:relative;width:var(--s);height:var(--s);flex:none;display:grid;place-items:center;border-radius:50%;background:var(--c);color:#fff;font-weight:600;font-size:calc(var(--s)*.38);line-height:1;-webkit-user-select:none;user-select:none}
.sheen-avatar>img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.sheen-avatar[data-presence]::after{content:"";position:absolute;right:-1px;bottom:-1px;width:calc(var(--s)*.3);height:calc(var(--s)*.3);min-width:10px;min-height:10px;border-radius:50%;background:var(--sheen-success);box-shadow:0 0 0 2.5px var(--sheen-background)}
.sheen-avatar[data-presence="playing"]::after{display:none}
.sheen-avatar-badge{position:absolute;right:-3px;bottom:-3px;width:calc(var(--s)*.4);height:calc(var(--s)*.4);min-width:18px;min-height:18px;border-radius:50%;display:grid;place-items:center;background:var(--sheen-accent);color:var(--sheen-on-accent);box-shadow:0 0 0 2.5px var(--sheen-background)}
.sheen-avatar-badge>.sheen-playing-bars{width:10px;height:9px;gap:1.5px;color:inherit}
.sheen-avatar-stack{display:inline-flex;flex:none}
.sheen-avatar-stack>.sheen-avatar{--s:28px;box-shadow:0 0 0 2px var(--sheen-background)}
.sheen-avatar-stack>.sheen-avatar+.sheen-avatar{margin-inline-start:-9px}

/* ---------- unread ---------- */
.sheen-unread{min-width:20px;height:20px;padding-inline:6px;border-radius:10px;display:inline-grid;place-items:center;background:var(--sheen-accent);color:var(--sheen-on-accent);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.sheen-unread:empty,.sheen-unread[data-count="0"]{display:none}

/* ---------- chat row ---------- */
.sheen-chat-row{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding-block:8px;padding-inline:16px;border:0;background:none;color:inherit;text-align:start;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheen-chat-row:active{background:var(--sheen-tonal)}
.sheen-chat-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sheen-chat-row-title{font-size:17px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-chat-row-sub{font-size:14px;color:var(--sheen-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-chat-row[data-unread] .sheen-chat-row-sub{color:var(--sheen-text);font-weight:500}
.sheen-chat-row-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;font-size:13px;color:var(--sheen-text-tertiary);font-variant-numeric:tabular-nums}

/* ---------- request card ---------- */
.sheen-request-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--sheen-radius-group);background:var(--sheen-surface-muted)}
.sheen-request-card-text{flex:1;min-width:0;font-size:14px;color:var(--sheen-text-secondary)}
.sheen-request-card-text b{display:block;color:var(--sheen-text);font-size:15px}
.sheen-request-card-actions{display:flex;gap:8px;flex:none}

/* ---------- listening now ---------- */
.sheen-presence-strip{display:flex;gap:16px;overflow-x:auto;padding-inline:16px;padding-block:4px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sheen-presence-strip::-webkit-scrollbar{display:none}
.sheen-presence-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;flex:none;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;padding:0}
.sheen-presence-item>.sheen-avatar{--s:58px}
.sheen-presence-item b{font-size:13px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-presence-item small{font-size:11px;line-height:1.25;color:var(--sheen-text-tertiary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- thread and bubbles ---------- */
.sheen-thread{display:flex;flex-direction:column;gap:4px;padding:8px 14px 12px}
.sheen-day{align-self:center;padding:10px 0 6px;font-size:12px;color:var(--sheen-text-tertiary)}
.sheen-msg{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:min(82%,440px)}
.sheen-msg.sheen-mine{align-self:flex-end;align-items:flex-end}
.sheen-msg+.sheen-msg:not(.sheen-mine),.sheen-mine+.sheen-mine{margin-top:-1px}
.sheen-msg-author{font-size:12px;font-weight:600;color:var(--sheen-text-secondary);padding-inline:12px}
.sheen-bubble{padding:9px 13px;border-radius:20px;border-end-start-radius:6px;background:var(--sheen-surface-muted);color:var(--sheen-text);font-size:16px;line-height:1.38;white-space:pre-wrap;overflow-wrap:anywhere}
.sheen-mine>.sheen-bubble{border-end-start-radius:20px;border-end-end-radius:6px;background:var(--sheen-accent);color:var(--sheen-on-accent)}
.sheen-msg-time{font-size:11px;color:var(--sheen-text-tertiary);padding-inline:8px;font-variant-numeric:tabular-nums}
.sheen-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:-8px;padding-inline:8px;position:relative}
.sheen-reactions>button{display:inline-flex;align-items:center;gap:3px;height:24px;padding-inline:7px;border-radius:12px;border:0;background:var(--sheen-surface);color:var(--sheen-text);font:inherit;font-size:13px;box-shadow:0 0 0 1px var(--sheen-separator),0 1px 3px rgba(0,0,0,.08);cursor:pointer}
.sheen-reactions>button[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--sheen-accent)}
.sheen-reactions>button b{font-weight:600;font-size:12px;font-variant-numeric:tabular-nums}

/* ---------- share card ---------- */
.sheen-share-card{width:248px;max-width:100%;border-radius:var(--sheen-radius-group);background:var(--sheen-surface);box-shadow:0 0 0 1px var(--sheen-separator);overflow:hidden;color:var(--sheen-text);text-align:start}
.sheen-share-card-art{position:relative;aspect-ratio:16/9;background:var(--sheen-surface-muted)}
.sheen-share-card-art>img{width:100%;height:100%;object-fit:cover;display:block}
.sheen-share-card-play{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--sheen-accent);color:var(--sheen-on-accent);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.sheen-share-card-play>svg{width:18px;height:18px}
.sheen-share-card-body{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.sheen-share-card-kind{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sheen-text-tertiary)}
.sheen-share-card-title{font-size:15px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sheen-share-card-sub{font-size:13px;color:var(--sheen-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-share-card-note{font-size:15px;line-height:1.38;padding:0 12px 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.sheen-share-card-actions{display:flex;gap:6px;padding:0 12px 12px}
.sheen-share-card-actions>button{flex:1;min-height:34px;padding-inline:8px;border-radius:17px;border:0;background:var(--sheen-surface-muted);color:var(--sheen-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sheen-share-card.sheen-compact{display:flex;align-items:center;gap:10px;padding:10px 12px;width:260px}
.sheen-share-card.sheen-compact .sheen-share-card-art{width:48px;height:48px;aspect-ratio:auto;border-radius:10px;overflow:hidden;flex:none}
.sheen-share-card.sheen-compact .sheen-share-card-art.sheen-round{border-radius:50%}
.sheen-share-card.sheen-compact .sheen-share-card-body{padding:0;flex:1;min-width:0}

/* ---------- reaction bar ---------- */
.sheen-reaction-bar{display:inline-flex;gap:2px;padding:6px;border-radius:999px;background:var(--sheen-sheet);box-shadow:0 12px 32px rgba(0,0,0,.24),0 0 0 1px var(--sheen-separator)}
.sheen-reaction-bar>button{width:42px;height:42px;border:0;border-radius:50%;background:none;font-size:24px;line-height:1;cursor:pointer}
.sheen-reaction-bar>button:hover,.sheen-reaction-bar>button[aria-pressed="true"]{background:var(--sheen-surface-muted)}

/* Reacting the Instagram way: .sheen-msg-row holds the message and a .sheen-react-btn heart beside it (outside, on the
   side away from the sender); a double tap drops a .sheen-heart-burst over the message. */
.sheen-msg-row{display:flex;align-items:center;gap:4px;max-width:100%}
.sheen-mine>.sheen-msg-row{flex-direction:row-reverse}
.sheen-msg-row>:first-child{position:relative;min-width:0}
.sheen-react-btn{flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:0;display:grid;place-items:center;background:var(--sheen-surface-muted);color:var(--sheen-text-secondary);cursor:pointer}
.sheen-react-btn>svg{width:15px;height:15px}
.sheen-heart-burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#ff3b5c;animation:sheen-burst .75s ease-out forwards}
.sheen-heart-burst>svg{width:64px;height:64px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
@keyframes sheen-burst{0%{transform:scale(0)}35%{transform:scale(1.15)}55%{transform:scale(1)}70%{opacity:1}100%{opacity:0}}
@keyframes sheen-burst-still{70%{opacity:1}100%{opacity:0}}
/* The card whose song is in the player: accent title, bars by the kind (.sheen-playing while it plays). */
.sheen-share-card.sheen-current .sheen-share-card-title{color:var(--sheen-accent-text)}
.sheen-share-card-kind .sheen-playing-bars{width:11px;height:11px;margin-inline-start:6px;vertical-align:-1px}
@media (prefers-reduced-motion:reduce){.sheen-heart-burst{animation-name:sheen-burst-still}}

/* ---------- composer ---------- */
.sheen-composer{display:flex;align-items:flex-end;gap:8px;padding-block:8px;padding-inline:12px;background:var(--sheen-background);box-shadow:0 -1px 0 var(--sheen-separator)}
.sheen-composer-field{flex:1;min-width:0;min-height:44px;max-height:132px;resize:none;padding:11px 14px;border:0;border-radius:var(--sheen-radius-field);background:var(--sheen-surface-muted);color:var(--sheen-text);font:inherit;font-size:16px;line-height:22px}
.sheen-composer-field::placeholder{color:var(--sheen-text-tertiary)}
.sheen-composer>button{width:44px;height:44px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;background:var(--sheen-surface-muted);color:var(--sheen-text);cursor:pointer}
.sheen-composer>button>svg{width:22px;height:22px}
.sheen-composer>button.sheen-composer-send{background:var(--sheen-accent);color:var(--sheen-on-accent)}
.sheen-composer>button.sheen-composer-send:disabled{opacity:.4;cursor:default}

/* ---------- typing ---------- */
.sheen-typing{display:inline-flex;gap:4px;padding:13px 14px;border-radius:20px;border-end-start-radius:6px;background:var(--sheen-surface-muted)}
.sheen-typing>i{width:7px;height:7px;border-radius:50%;background:var(--sheen-text-tertiary);animation:sheen-typing 1.2s ease-in-out infinite}
.sheen-typing>i:nth-child(2){animation-delay:.2s}
.sheen-typing>i:nth-child(3){animation-delay:.4s}
@keyframes sheen-typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}

/* ---------- friend picker ---------- */
.sheen-friend-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px 8px}
.sheen-friend-pick>button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:4px 0;border:0;background:none;color:var(--sheen-text);font:inherit;font-size:12px;cursor:pointer}
.sheen-friend-pick>button>span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheen-friend-pick>button>.sheen-avatar{--s:54px}
.sheen-friend-pick>button[aria-pressed="true"]>.sheen-avatar{box-shadow:0 0 0 2.5px var(--sheen-background),0 0 0 5px var(--sheen-accent)}

/* ---------- listen together ---------- */
.sheen-jam-banner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--sheen-radius-group);background:var(--sheen-accent);color:var(--sheen-on-accent)}
.sheen-jam-banner-text{flex:1;min-width:0;font-size:13px;line-height:1.3}
.sheen-jam-banner-text b{display:block;font-size:15px}
.sheen-jam-banner>button{min-height:36px;padding-inline:14px;border-radius:18px;border:0;background:rgba(255,255,255,.22);color:inherit;font:inherit;font-size:14px;font-weight:600;cursor:pointer;flex:none}
.sheen-jam-banner .sheen-avatar{box-shadow:0 0 0 2px var(--sheen-accent)}

@media (prefers-reduced-motion:reduce){.sheen-typing>i{animation:none}}