/* Always loaded. (1) Hides each skin's extra page furniture unless that skin is on. (2) Styles the "Look" picker, which keeps its own
   dark-glass colours so it reads the same on every skin. */
html:not([data-skin="signal"]) .signal-hero,
html:not([data-skin="channel"]) .signon-slate,
html:not([data-skin="aurora"]) .aur-kicker { display: none; }

/* Video flags (Short, Private, Unavailable, In pool; built by VideoFlags in explorer.js). The MEANING is the same on every skin:
   same colour, same icon, same words. Each skin keeps its own badge shape (font, radius, shadow) from its .badge rules.
   Light skins use the first set; the dark skins (Signal, Aurora) the second. */
html[data-skin] { --fl-short-bg: #ece6ff; --fl-short-fg: #4a2fb0; --fl-short-bd: #b9a8f5;
  --fl-private-bg: #ffecd2; --fl-private-fg: #8a4a00; --fl-private-bd: #f0b66a;
  --fl-off-bg: #ffe0dc; --fl-off-fg: #a02214; --fl-off-bd: #f0a39a;
  --fl-pool-bg: #dcf5e4; --fl-pool-fg: #12683a; --fl-pool-bd: #8fd3a9; }
html[data-skin="signal"] { --fl-short-bg: rgba(150, 120, 255, .2); --fl-short-fg: #cbbcff; --fl-short-bd: rgba(150, 120, 255, .5);
  --fl-private-bg: rgba(255, 170, 60, .18); --fl-private-fg: #ffc477; --fl-private-bd: rgba(255, 170, 60, .45);
  --fl-off-bg: rgba(255, 93, 79, .2); --fl-off-fg: #ff9a90; --fl-off-bd: rgba(255, 93, 79, .5);
  --fl-pool-bg: rgba(70, 230, 150, .18); --fl-pool-fg: #7df0b4; --fl-pool-bd: rgba(70, 230, 150, .45); }
@media (prefers-color-scheme: dark) {   /* Aurora is dark only when the system is */
  html[data-skin="aurora"] { --fl-short-bg: rgba(150, 120, 255, .2); --fl-short-fg: #cbbcff; --fl-short-bd: rgba(150, 120, 255, .5);
    --fl-private-bg: rgba(255, 170, 60, .18); --fl-private-fg: #ffc477; --fl-private-bd: rgba(255, 170, 60, .45);
    --fl-off-bg: rgba(255, 93, 79, .2); --fl-off-fg: #ff9a90; --fl-off-bd: rgba(255, 93, 79, .5);
    --fl-pool-bg: rgba(70, 230, 150, .18); --fl-pool-fg: #7df0b4; --fl-pool-bd: rgba(70, 230, 150, .45); }
}
html[data-skin="crate"] { --fl-short-bd: #151515; --fl-private-bd: #151515; --fl-off-bd: #151515; --fl-pool-bd: #151515; }   /* Crate outlines everything in ink */
.ex-flags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
html[data-skin] .ex-vid .badge.ex-flag { margin-left: 0; display: inline-flex; align-items: center; gap: 4px; background: var(--fl-bg); color: var(--fl-fg); border-color: var(--fl-bd); }
html[data-skin] .ex-vid .badge.ex-flag svg { flex: none; }
html[data-skin] .ex-flag-short { --fl-bg: var(--fl-short-bg); --fl-fg: var(--fl-short-fg); --fl-bd: var(--fl-short-bd); }
html[data-skin] .ex-flag-private { --fl-bg: var(--fl-private-bg); --fl-fg: var(--fl-private-fg); --fl-bd: var(--fl-private-bd); }
html[data-skin] .ex-flag-unavailable { --fl-bg: var(--fl-off-bg); --fl-fg: var(--fl-off-fg); --fl-bd: var(--fl-off-bd); }
html[data-skin] .ex-flag-pool { --fl-bg: var(--fl-pool-bg); --fl-fg: var(--fl-pool-fg); --fl-bd: var(--fl-pool-bd); }
/* A video you cannot play or add: its title is struck through and quiet. */
.ex-row-off .ex-vid-title { opacity: .6; text-decoration: line-through; text-decoration-thickness: 1px; }

/* No rule above the Workbench selection links on any skin (Crate and Signal each drew one). */
html[data-skin] .ex-wb .ex-toolbar { border: 0; }

.skin-picker { position: fixed; left: 12px; bottom: 12px; z-index: 2147483000; font: 600 13px/1.2 system-ui, sans-serif; }
.skin-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer;
  color: #fff; background: rgba(20, 24, 33, .88); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 4px 16px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.skin-btn:hover { background: rgba(20, 24, 33, .97); }
.skin-btn:focus-visible, .skin-opt:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 2px; }
.skin-menu { position: absolute; left: 0; bottom: 42px; width: 250px; padding: 6px; border-radius: 14px; background: rgba(20, 24, 33, .97);
  border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
.skin-menu[hidden] { display: none; }
.skin-opt { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: #fff; cursor: pointer; font: inherit; }
.skin-opt small { display: block; margin-top: 2px; font-weight: 500; font-size: 11.5px; color: #b9c2d3; }
.skin-opt:hover { background: rgba(255, 255, 255, .1); }
.skin-opt[aria-checked="true"] { background: rgba(124, 196, 255, .22); }
.skin-opt[aria-checked="true"] b::after { content: " ✓"; }
@media (max-width: 767px) { .skin-picker { left: 8px; bottom: 8px; } .skin-btn span { display: none; } .skin-btn { padding: 0 10px; } body { padding-bottom: 54px; } }
/* The fixed Look button must not sit on the last thing in the sidebar (desktop) or on the page bottom (phone). */
@media (min-width: 1100px) { .parent-nav.ex-side { padding-bottom: 64px; } }