/* Shared app components used on every app template (skinned templates also get these via skins.css).
   "Watch & listen" media list (EventMusic::mediaList) and share buttons (ShareLinks::buttons). */
.sk-media { display: grid; gap: 8px; }
.sk-media button, .sk-media a { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; background: var(--sk-sf2, #f8fafc); border: 1px solid var(--sk-ln, #e5e7eb); border-radius: var(--sk-r, 10px); color: inherit; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.sk-media .c { width: 44px; height: 44px; border-radius: calc(var(--sk-r, 10px) - 2px); background: color-mix(in srgb, var(--sk-ac, var(--event-primary, #0f766e)) 16%, transparent); color: var(--sk-ac, var(--event-primary, #0f766e)); display: grid; place-items: center; overflow: hidden; }
.sk-media .c img { width: 100%; height: 100%; object-fit: cover; }
.sk-media b { display: block; font-size: .88rem; line-height: 1.25; } .sk-media small { display: block; font-size: .72rem; opacity: .7; }
.sk-share { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-share a, .sk-share button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--sk-ln, #e5e7eb); border-radius: var(--sk-r, 10px); background: var(--sk-sf, #fff); color: var(--sk-tx, #111) !important; font-size: .76rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.sk-share i { width: 14px; text-align: center; }